You already know that email marketing is one of the most profitable marketing channels for all businesses. The reason is quite obvious: it’s a great way to keep in touch with your would-be clients and form a trustworthy business relationship with them.

It’s different from phone numbers in that email gives people more time to educate themselves on your products and make more informed decisions compared to the urgency of phone numbers.

It’s also quite obvious that email marketing would work only if, and only if, your subscribers are engaged. If you’re wondering what engaged subscribers look like, here are a few of their benefits:

• They open your emails the moment they see them in their inboxes and/or bookmark them for future review.
• They act on your call-to-actions in your emails, get engaged with your content and convert well.
• They are so fond of your emails they even forward them to the people they know and thus help you grow your list.
• They find themselves affiliated with your business and would give their honest feedback whenever you ask them.

Here are three ways you can keep your email subscribers engaged:

1. Build your list the right way

One of the biggest mistakes people make in email marketing is building an email list at any cost. There’s the wrong assumption that bigger lists are more profitable so the main email marketing goal for many marketers would be growing their list.

This wrong assumption would inevitably lead to building an unclean list, a list with people who are not interested in your content or your business at all. And they won’t engage with your emails at all.

Some of the mistakes people make when growing their email list are:

• Adding contacts to their list without their consent.
• Misleading people about what you’re offering in your newsletter. Offering irrelevant but exciting lead magnets to lure people into subscribing to your list.
• Overpromising in your emails to keep people in your list.

2. Send relevant content

The number one reason people unsubscribe from email newsletters is receiving irrelevant content. It all goes back to the main reason people have subscribed to your list in the first place. Diverting from the original promises would alienate your subscribers.

This does not necessarily mean neglecting promotional content. You can send promotional content as long as they’re relevant and would appeal to your subscribers. After all, the main reason you’ve created your newsletter is so that you can promote your services and products to your subscribers.

A great way to promote your content in your newsletters is what the great email copywriter, Ben Settle, explains as “infotainment”, giving your audience a “great-tasting hot dog” but “nourishes them like broccoli”. The idea is not new in the world of marketing and advertising but is what most commercial emails fall short of in practice — they are either informative but tasteless or amusing but pointless.

Here are some elements that would make your emails infotainment, that is both amusing and informative (about your product):

1. Prioritizing your subscribers’ interests: nothing catches our attention more than when people talk about us or what matters to us. It is well-known that a good marketing copy is what captures its audience’s interests the most. Spend time to get to know your audience and use their interests in your emails. Customer experience management softwares or sentiment analysis tools could be a great help here.
2. Retaining a unique voice and perspective in your emails: don’t be a copycat — spend some time to discover a unique approach to the topics you write about. Differentiate yourself by using lesser-explored content formats in your emails. Videos have a great potential for increasing engagement. Use a free video marketing platform such as Biteable to make engaging marketing videos.
3. Being a good storyteller: we love stories. Our minds are hard-wired to make sense of the patterns in narratives and learn from the ups and downs in them. We are curious to know the fate of the people in the stories. A well-structured story captures our attention, presents some people we identify with (or antagonize), and proposes a lesson for learning (i.e. your marketing message).

3. Respect your subscribers intelligence:

Using shady and dishonest techniques to get more opens and clicks is the equivalent of disrespecting people’s intelligence in email marketing. The consequences would be dire for your overall business. Claiming anything ridiculous, making up facts, or overpromising will do nothing but risk your entire reputation.

The most common dishonest practice in email marketing is using clickbait subject lines. This might give you a few more opens or clicks but eventually, it frustrates your subscribers. Send people a few clickbait emails and they’ll doubt whatever claims you make — anytime, anywhere.

Here are a few examples from my inbox:

• “Want my website?” (trying to sell his website’s clumsy theme)
• “I told you not to do this” (I had no previous communication with them)
• “Your subscription is expiring” (What subscription?)

The latest revolutionary technique of these people is using “Re:” in their subject lines without having started a conversation with me.

• “Re: your invite”
• “[last chance] Re: your offer”
• “Re: Join . . . in London on October 19th – save your spot now!”

The best strategy for writing a subject line is being truthful to the content in the first place. Being smart comes next. This holds true for any kind of subject lines you’re writing including blog posts and cold emails. Hunter’s guide on cold email subject lines is a great help here.

Don’t worry about unsubscriptions:

Question remains: should you worry about losing your subscribers all the time?

The answer is no.

As a matter of fact, you need to get rid of your unengaged subscribers from time and time, an act which is referred to as cleansing your list. Having an unclean list (a list that contains so many inactive subscribers) is costly in two ways:

1. It’s unnecessarily more expensive because you’re paying for a large, but not engaged, list.
2. Poor numbers (including low open rates) will increase your spam score. Your emails will be considered spam after a while and not delivered to people’s primary inbox.

This does not mean you should not try to engage your subscribers. The three ways to engage your email subscribers explained in this article are quite the standard in successful email marketing.

In the world of amateur site building, Wix has fast cemented itself as an invaluable resource for anyone who needs a professional online presence but knows little to nothing about how to make a website.

The cloud-based development platform was established in 2006 by a trio of startup founders who saw a need for a simple website builder that’s affordable, intuitive, and super easy to use — even for the technically challenged.

Today, Wix has amassed more than 120 million users worldwide and consistently appears in (or even tops) widely consulted lists of the best website builders out there — thanks in no small part to the help it provides small business owners, nonprofits, entrepreneurs, and creative professionals who have no internal web development department, little budget to pour into web design, and zero coding experience.

The platform has also evolved over time to offer not just an HTML5 drag-and-drop builder and hundreds of beautiful templates, but free hosting services, an intelligent design assistant, a wide range of apps and e-commerce features, a logo maker, analytics, and various social and email marketing tools.

Needless to say, it’s a powerful option for professionals of all types. And if you’re considering using Wix to build your brand’s site, look no further than this comprehensive guide for direction. Here, you’ll discover the steps you need to take to make a Wix website from scratch, and we’ll explore several of the builder’s most popular features, including the Wix App Market.We’ll cover the platform’s core strengths and assess how it stacks up against competitor website builders, like Weebly and Squarespace. Before we close, we’ll also review Wix’s various subscription plans and pricing options — including its free service — so you’re better positioned to select a model that matches your needs.

Wix tutorial: How to make a website on Wix

Whether you’re looking to build a simple landing page that promotes your brand, an online store, or a robust lead generation platform, you can create a Wix site with little effort by following a series of straightforward steps. In this tutorial, we’ll walk you through the process and teach you how to use Wix to establish your online presence.

How to use Wix: A step-by-step guide

1. Sign up and create an account

Fortunately, Wix made the signup process swift and simple — just a few clicks, and you’ll have an account. From the Wix homepage, click Get Started. You can register by entering your email address and a password (look out for an email verification message from Wix), or you can sign up through your Facebook or Google accounts.

Once you’re in, the platform will prompt you to start creating a new site immediately. It’ll ask you a few questions so it can provide tailored recommendations. While you may be itching to get going, it’s worth pausing here for a moment to consider two core basics of website creation: your web hosting plan (where your site’s files are stored online) and your domain name (your site’s unique virtual address).

The free version of Wix — the one you have access to after signup — comes with free hosting and gives your website a lengthy Wix domain that follows the format “username.wixsite.com/siteaddress.”

If you want your own custom web address, which looks more professional, you’ll need to upgrade to one of Wix’s Premium plans. This allows you to either buy a domain directly through Wix or connect a domain you’ve bought elsewhere.

In general, it’s a good idea at this early stage to explore Wix’s various subscription plans and the features attached to each (more on this later), so you can ensure you’re set up with everything you need from the get-go. That said, if you decide to delay this decision, you’ll have plenty of opportunities to upgrade at a later stage.

For more information on web hosting and domain names, read our guide on how to make a website.

2. Choose between Wix Editor and Wix ADI

Wix offers several different design tools for customers, geared at different needs and levels of web creation experience. One of the first choices you’ll need to make after registration is whether to use Wix Editor or Wix Artificial Design Intelligence (ADI) to build your site.

The former is a drag-and-drop builder that gives you complete freedom over the design of your site and lets you make precise adjustments to its layout and content.

The first-of-its-kind Wix ADI, in contrast, does all the work for you. Using artificial intelligence, it draws on thousands of possible combinations and pulls in relevant online information to build a polished site from scratch. All you have to do is answer a few questions and make broad edits, if necessary, to the recommended text, images, and aesthetic theme.

As a general rule, if you know nothing about websites and simply want to generate a finished product as quickly as possible, ADI is probably your best bet. However, if you’d prefer to hold the reins and craft a pixel-perfect site that’s precisely customized to your whims, pick the Wix Editor.

We compared the two solutions on a few parameters below to help you make a choice.

	Wix Editor	Wix ADI
Ease of use	Fairly simple to use, with plenty of support	Requires almost no effort
Efficiency	Relatively fast — get a personalized website in hours	Impressively quick — get a personalized website in minutes
Level of control	Full control over all design elements	Moderate control over broad look and feel
Customizability	Website is fully customizable	Only high-level design, layout, color, font, image, and text edits can be made
Availability of advanced design features	Plenty of advanced features and functionality	Advanced features largely absent; limited access to Wix apps
Pricing structure	Same as ADI	Same as Editor

Making a website using Wix Editor

The steps below outline how to create a Wix site using the Editor. If you decide to use Wix ADI instead, go to the ADI section below.

3. Select a template

If you’re using the Wix Editor, your first step will be choosing a template as the foundation for your new website.

The platform offers more than 500 distinct templates, all designed by professionals and categorized by website type and industry for easy filtering. There’s a robust selection for everything from e-commerce sites and lifestyle blogs to business platforms and professional portfolios. You can even pick from suggestions for particular sectors, like advertising or fashion.

If you’d prefer to start from scratch, Wix also provides blank templates, but the designer versions are useful jumping-off points if you need more guidance. When browsing the latter, focus on the structure, font style, and palette of the web pages rather than the specific visuals or text, as you’ll likely replace images and copy. You can click into each template to explore it further and can even view it on a simulated mobile screen by clicking the smartphone icon.

You can edit every tiny detail of the template you choose, but it makes sense to select an option that mirrors your vision for your site as closely as possible. Naturally, if your starting point resembles your desired endpoint, the journey between the two will be much shorter.

To pick the right template, ask yourself the following questions:

• What is the purpose of my website?
• What layout makes the most sense for my objective?
• What sort of features and functionality do I need built in?
• How would I describe my brand’s look and feel?
• What’s the right balance between text and imagery?

4. Customize your site with the drag-and-drop builder

Once you’ve chosen your template, you can manipulate and tweak it to make it your own.

Use the menu on the left side of the Editor to select desired features, drag them onto your template, and drop them in place. You can also use the drag handles on the edge of page sections to move content up or down, and you can shift any element on the page by simply clicking on it and — you guessed it — dragging it elsewhere.

The “Add (+)” icon in the left menu is your best friend. With it, you can add anything from text boxes, image galleries, vector art, and buttons to interactive slideshows, social bars, and menus to your website.

To get a feel for how this functionality works, watch this video about how to add a horizontal strip to a Wix web page:

To customize any feature already present in your template, select it and click on the icons that appear to edit text, change the font, tweak a design, add animated effects, link to a page, or swap out images.

When it comes to visuals, you can upload your own media, select from Wix’s extensive library of free images, use free Unsplash photos, or purchase images from Shutterstock through Wix.

Here are just a few of the many different actions you can take when customizing your site from a template:

• Edit all text, and replace images and videos
• Add or delete pages
• Add call-to-action buttons, and link them to relevant forms and pages
• Add social icons and link to your business’s social accounts
• Add extra strips to pages (like a customer testimonials strip)
• Embed lead generation forms
• Add depth and interest by incorporating advanced design features, like parallax scrolling and hover states
• Incorporate additional business and marketing features, like a booking system, an online store, or an events calendar

If you’ve added an e-commerce component to your site, setting this up will require a little extra work. You’ll need to upload product imagery and information; stipulate pricing; add shipping regions (if applicable); set up payment processing; and tweak your product, cart, and thank-you pages. You can do all of this from the My Store icon in the Editor’s left menu.

5. Level up your site with CSS and HTML code

While the Wix Editor gives you the freedom to add hundreds of design elements and apps to your site, you may want to incorporate certain functionality that simply isn’t (yet) available through this tool. In this case, you’ll need to take the additional step to add custom code to your platform.

There are several different ways to add code to Wix websites. The most advanced is Corvid by Wix, an open development platform. To enable Corvid, turn on Dev Mode in the Editor’s top menu bar.

If you simply want to add a snippet of code to your site to bring additional features to life, follow the steps below:

1. Click Add in the Editor’s left menu.
2. Select Embed (you may have to hit More at the bottom of the menu first).
3. Select Custom Element and drag it onto your page.
4. Click Choose Source, select Server URL, paste the relevant URL, and enter a tag name.
5. Click the Set Attributes icon to define the element’s attributes.

Follow a similar process to add an HTML iframe or embed an external site on your website.

6. Optimize your site for mobile and search

Today, almost 51 percent of global online traffic is via mobile devices, so it’s safe to assume that many of your website’s visitors are going to be browsing on smartphones. For this reason, it’s essential that you take the extra step to optimize your site for mobile devices so that it displays appropriately on smaller screens.

Fortunately, Wix automatically generates a mobile-friendly version of your website, but it’s still worth making additional edits to ensure a seamless on-the-go experience. To do this, switch over to the Wix Mobile Editor by clicking on the phone icon in the Editor’s top menu bar.

Here, you can make all sorts of adjustments (again, using drag-and-drop functionality) that won’t reflect on the desktop view of your site. You might want to tweak the font size so that text is legible, hide elements that don’t scale well, realign images, or add a quick action bar, for example.

For more info on how to use the Mobile Editor, watch this short video.

If you want people to find your website organically, it’s also critical that you leverage search engine optimization (SEO) best practices when building it. For those who know nothing about SEO, Wix provides an SEO Wiz tool that generates a personalized SEO plan for your site and walks you through every little step you need to take to boost its visibility in search results.

For instance, the SEO Wiz will prompt you to make each web page discoverable to search engines by refining the page URL, tweaking its title tag, and adding a meta description, which all takes just minutes in the Editor.

7. Preview and publish your site

Once you’re done customizing your Wix website, your final step will be publishing it so it’s live online. Before doing so, it’s important to preview your finished product.

Click Preview in the top menu bar to see what the site looks like and how it functions for users. Follow the whole user journey to pinpoint any gaps — buttons that don’t link anywhere or features that still need to be activated — and make tweaks accordingly.

When you’re confident your website looks and behaves the way it should, simply hit the Publish button in the top menu bar on the far right. It’s as simple as that. You’ll have the option to View Site to see it live, and if you haven’t upgraded to a Premium plan and connected a custom domain yet, the platform will prompt you to do so now and guide you through these last steps.

Making a website using Wix ADI

The steps below outline how to use Wix ADI to create a website in minutes.

1. Answer a few simple questions

Step one when using Wix ADI is answering a series of questions about your business or area of professional practice, the type of website you want to create, the features and functionality you need, and your preferred design aesthetic.

The intelligent assistant will also ask if you’d like to import any information, text, or images from elsewhere online, and if you want the system to use your company logo colors to compose a palette for your new website. Wix ADI uses all of this information to construct a functioning site that’s unique to you and your needs.

To answer these initial questions effectively, have the following ready:

• The name of your business/site
• A list of site components you need
• Links to an existing website or other relevant platforms
• Your professional logo
• Links to your brand’s social accounts

2. Select your preferred homepage design

Before generating your full website, Wix ADI will produce three possible homepage designs for you to review — each complete with intelligently recommended copy and visuals.

Pick the one that communicates your information most effectively and best suits your professional style and brand’s corporate identity. The layout you choose here is just a starting point for the final product. You can make revisions in the next step.

3. Tailor your site’s content

A few minutes after you’ve chosen a homepage, you’ll have a complete professionally designed site. If it’s everything you want right off the bat, just double-check that everything’s linked and working properly, then publish it. But chances are, you’ll want to make at least a few small adjustments.

Wix ADI doesn’t allow you to manipulate site elements as precisely as Wix Editor, but it’s really easy to make edits in broader brushstrokes. You can, for instance, change the font set or color palette across your whole site, pick an entirely different design theme, and drag new ready-made sections onto a page.

You can also work block by block and swap out the layout of individual page sections in just two clicks, edit all suggested text, replace images, and either hide or show features like buttons or image galleries. If you want to incorporate an online store, activate a blog, or embed HTML code, you can do this through the Wix ADI Apps market.

Much like Wix Editor, Wix ADI also offers a mobile view, where you can change the design of page sections to optimize content for on-the-go consumption. Similarly, you can use the Wix SEO Wiz tool and add meta tags to pages in much the same way you would in Wix Editor.

If you want to make more advanced design changes that aren’t available through Wix ADI, you can opt to Go to Editor. Just remember that if you switch back to Wix ADI, you’ll lose any edits you made in the Editor.

4. Publish your site

See step 7 under “Making a website using Wix Editor.” Publishing a site in Wix ADI works the same way.

How to unpublish Wix websites

While the goal is ordinarily to publish a new site, there might be times when you need to unpublish a Wix website. Perhaps you mistakenly hit Publish while designing your platform, or you want to make significant changes to an established site without your customers seeing edits in progress. Maybe you’ve changed your business model and no longer need your old Wix site.

Whatever the reason, Wix makes it incredibly easy to unpublish your site so it’s no longer accessible to visitors. You can unpublish your site in less than a minute by following these steps:

1. Go to My Sites and select the website you want to unpublish.
2. In the site’s dashboard, click Settings toward the bottom of the left menu.
3. In the site Overview, find Publish Status in the third row from the top.

Click Unpublish and confirm that you’d like to unpublish this website. The Publish Status will update accordingly.

Popular Wix features you’ll love

While Wix is first and foremost a website builder, it also offers a vast assortment of additional services and add-ons that can enhance the overall look and feel of your site, your visitors’ experience, and your business’s functionality.

Whether you’re a photographer looking to showcase your work, a startup offering online sales, or a nonprofit looking to improve your fundraising efforts, these extras are where you can truly leverage Wix to build both your brand and your business — not just your website.

Below, you’ll find intel on some of the most exciting and useful features as well as advice on how to use them.

Choose from more than 500 Wix templates

One of Wix’s most formidable features is its visually striking collection of templates. Wix has taken the tough work out of coding and designing by creating hundreds of different layouts that you can easily edit and make your own.

Because the graphics, fonts, images, colors, and style you use are vitally important in making a first impression and communicating what you and your brand stand for, these templates tend to be one of the features Wix users are most fond of.

There are more than 500 appealing templates to choose from, all of which are categorized according to your website’s goal or the industry you’re working in. For example, a musician can showcase their music on their site, while a fashion designer can display gorgeous images of their products on their site. Other popular categories include church templates, e-commerce templates, and portfolio templates.

In addition to using the Wix Editor and the ready-made Wix templates, you can add almost any type of functionality to your site, like an online shopping page, booking forms, music players, and more. You can also restructure the template and add graphics, images, and content while moving each element around to your liking. Wix uses what’s called a “pixel-perfect” editor, which gives you complete control of the position of different elements on the page.

All Wix templates are absolutely free for you to use, but bear in mind that your site will show a Wix ad at the top unless you choose to upgrade to a Premium plan.

To choose a template

• Go to the Wix Templates page.
• Hover over the template you’d like to use.
• Click View to preview a template or click Edit to start editing.

According to Wix, these five template categories are among the most popular:

Online Stores. No matter what type of online business you’re running, Wix has a diverse selection of templates for virtual stores. Special features include a shopping cart and live chat.

Blogs. Wix’s easy-to-edit blog templates include RSS feeds and allow you to schedule posts and updates. Blogs also offer a mailing list signup form for newsletters.

Photography. Wix is extremely popular with photographers, especially because the templates beautifully showcase visual work. Special features include bookings and client logins.

Portfolio & CV. Wix templates are not only aesthetically pleasing but also very quick and easy to assemble for any skill level. Special features include file downloads (e.g., for CVs or resumes), one-page layouts, and video players.

Restaurants & Food. Wix caters to different industry needs. With the Wix Restaurant app, restaurants will find dedicated menu templates, to-go order forms, and more. Special features include online ordering, table reservations, and email marketing.

Customize your site with Wix code features

Do you want more freedom and creativity to develop your website outside the bounds of Wix’s templates? Depending on your comfort and skill levels, you can use Corvid by Wix (formerly known as Wix Code) to build and amend the back end of your site. This unique feature offers you the opportunity to customize more than the cosmetics of your site, including how it manages data and behaves.

While the Wix website builder and templates are geared to any skill level, those with more advanced design and web development skills will enjoy the easy and powerful features that enable you to add your own code.

Wix even recommends features you may want to code into your site’s functionality yourself, such as adding custom widgets (i.e., weather), allowing visitors to access a database, or making advanced forms. There are dozens of video tutorials and coding examples on Wix Support to walk you through this process.

Corvid operates on serverless platforms, which means all of your work, updates, and changes are saved to the cloud rather than to hard drives. This provides enhanced security, convenience, and monitoring.

Make quick and easy changes with the Wix Editor

Simply put, the Wix Editor is your paintbrush. With this easy-to-use dashboard, you can create and change the way your website looks, feels, and functions. This part of the builder comes complete with tons of sub-features to help you make your site appealing and unique.

How much creative freedom does the Wix Editor offer?

Far from being a standard template builder, the Wix Editor has so many customizable elements that no two websites will look the same. You can choose from hundreds of images, graphics, and other design elements to enhance your site’s look and feel.

Every feature of the template you choose can be edited in one easy-to-use tool. You can also add pages depending on your content needs, reroute your site navigation, and add all sorts of functionality through the App Market. To make life even easier, Wix offers the option to buy professional imagery to enhance your site.

Harness the power of artificial intelligence with Wix ADI

Do you find the idea of modifying your site template overwhelming? Perhaps there are too many options, and you have no idea where to start. If this is the case for you, you’ll be happy to know that Wix has recently made it even easier to build your own website with the Wix Artificial Design Intelligence (ADI) feature.

ADI does all of the thinking and creating for you based on your specific needs. No other website builder uses artificial intelligence to create sites for you.

There are billions of creative combinations you can use to make your unique site, from layouts to images, text, forms, and product stores. Wix ADI makes this process simple and streamlined by learning about you and what you’re looking for, then selecting the features that best suit you. This means less hassle with the same one-of-a-kind feel.

First, Wix ADI will ask you a brief set of questions to learn what you’re looking for in a website. Then, using an AI algorithm, it will combine industry-standard design rules with what it learned from your social media content to create a few professional site options for you.

Wix is always improving its services, and ADI is no different. Wix ADI’s capacity to build more types of sites will continue to grow.

On the flip side, Wix ADI doesn’t come with the same structure and design variation as the Wix Editor and its ready-made templates. Another trade-off is limited ability to customize your site, which is not to say that you won’t be able to make some changes to the design. You’ll have the option to base the colors for the site on those in your logo as well as to choose a style for fonts and backgrounds.

What are the benefits of ADI?

Once you’ve completed the questionnaire and ADI has run its algorithm, it will present you with three design options to choose from. The ADI designs are built to be modern, attractive, and perfectly suited to your site’s purpose. For example, here’s an environmental NPO website created by ADI, with colors based on the logo in the top left.

You can make basic adjustments to the preset design to tweak it however you see fit. Just click on the section you want to adjust and then choose from a number of options, such as editing the content, selecting a different preset design, or changing basic characteristics like the color. What ADI lacks in design flexibility it more than makes up for with ease of use.

As part of the design process, ADI will automatically install a few relevant apps based on your answers to the questionnaire. For instance, if you said you were running a massage therapy business and wanted help managing your appointments, ADI would include a booking app, along with a couple of other apps like a contact form or blog. Any additional functionality requires you to switch over to the Wix Editor.

Take your site to the next level with the Wix App Market

Once you’ve used the Wix website builder to create your website, there are hundreds of add-ons available in the Wix App Market to increase your site’s functionality and take your site to the next level.

From online forums and social media applications to marketing tools and analytics, this in-house marketplace has a quick-click solution that you can easily add to your website in no time. What’s more, the Wix App Market itself is easy for beginners to navigate. The App Market supports a large variety of businesses and boasts a huge array of apps that are completely free and mobile-friendly.

There are so many apps available that you might be overwhelmed by the choices, so Wix has highlighted some of the best.

4 of the best Wix Apps, according to Wix

1. Amazon

If you’re an e-commerce company selling products on Amazon, the Amazon app will connect your site to your Amazon product listings for up to 30 products. It gives visitors a sneak peek of what you offer.

2. Visitor Analytics

To increase traffic to your site and create awareness of your brand, monitor visitor analytics using the Wix Visitor Analytics app. Through clear and simple graphs, this tool allows you to see how people are interacting with your website.

3. Social Media Stream

If you share and promote your social media posts across various platforms, the Social Media Stream app will streamline this process and the way your posts are displayed on your site. It’s customizable and easy to set up.

4. Before and After Slider

This cool feature is perfect for people who transform things or spaces, like landscapers or stylists. After adding the app, simply upload one “before” and one “after” photo, and the app will structure them in an easy, sliding frame.

Make a logo with the Wix Logo Maker

A logo is a must-have for any business. It’s the visual representation of your brand and how people will remember you. Creating a logo for your brand can be one of the most challenging aspects of setting up a new business, however, because there are many subtle design choices that can impact how you’re perceived. Your logo should clearly communicate your personality as a brand so that people want to connect with you.

Wix offers a free logo maker, taking all of the hard work and decision-making out of your logo design while still creating a symbol that’s memorable and can create a unique impression. You’ll be able to customize the color, icon, and font so that your logo perfectly suits your needs.

Wix logo maker is a free service that starts by understanding your business and its unique characteristics. After completing a short set of questions, you’ll get design inspiration focused on your needs as well as a set of options for your logo.

How you can create a Wix logo in 6 easy steps:

1. Explore the Wix logo library for inspiration to get your creativity flowing. It’s important to have a message in mind for your brand. For instance, if you’re an insurance company, use imagery that conveys trust and reliability.

2. Wix will ask you a short series of questions about your business, what you’re trying to accomplish, and your design preferences.

3. After you take the survey, Wix will show you the results and generate various logo options to choose from.

4. Customize the logo with your preferred colors and fonts.

5. Use Wix’s categorized logo library to compare how your logo measures up to others in your industry.

6. Download your logo. Various file formats are available, including JPEG, PNG, and BMP.

Keep in mind that in order to download and use the logo in high resolution, you must purchase one of Wix’s Premium plans.

Start a site in no time with free Wix hosting

Website hosting is like the rent you pay for your website to live and be visible on the internet. It’s a critical, but technical, foundational element to building your online presence. Wix offers website owners free web hosting, which makes the process of publishing your site simple and secure.

Wix website hosting walks you through creating a domain name, which is like your street address on the web. You can purchase and register this domain directly through the Wix site.

Is Wix a good web host? Let’s see.

1. It’s fast. Wix has secure servers that are located around the world. It has implemented a number of infrastructural upgrades in the last few years to help your site load as fast as possible.
2. It’s easy. Your free website hosting is automatically set up once you publish your site. You won’t need to do anything else to get up and running.
3. It’s reliable. According to Wix, its sites operate with a 99.9 percent uptime success rate. This means your website will nearly always be up and running.
4. It’s secure. All data on your site, such as your bank accounts or contacts, is stored securely and complies with the highest international security standards.
5. It’s affordable. Wix’s free web hosting option includes 500 MB of cloud storage and 500 MB of bandwidth. If you need more storage space for your site’s content, or if you want to make it faster and easier for your visitors to stream or download from your site, Wix allows you to upgrade to a Premium plan at any time.

Strengths of Wix: How does it stack up against the competition?

Now you know the ins and outs of creating a Wix website as well as the key features you can leverage for enhanced functionality, but you still may be wondering if Wix is the best website builder for you.

When it comes to trying new products or services, the number one question is “Why choose this one over the others?” Selecting a website builder is no different. To compare one solution against another, consider the following.

What to look for when choosing a website builder

• Cost. Arguably one of the most important questions is, “Will it cost me anything?” While some website builders offer a free account or free trial, there’s often a monthly fee attached if you want access for a certain time period or if you need certain functionality. Depending on what your website needs are, opting for a Premium plan may be worth the cost. If your website is a little more low-key, then a free account may be the best choice. Nonetheless, getting a free account or starting a free trial will help you determine what will and won’t work for you.

• Fit with your objective. Is this website builder a good fit? Will it help you elevate your personal, professional, or business brand? While some website builders specialize in the e-commerce side of things, others are great for launching a personal blog. Many website builders can be used for personal or business needs, but some have the extra features to complement the type of site you want.

• Marketing and analytics. While some website builders require a premium plan for sophisticated marketing or analytics capabilities, it’s important to know what they offer and if it aligns with the goals of your brand or business. Having a good marketing plan for your website and personal brand or business is crucial to keep your audience engaged and up to date on what you’re doing.

  The analytics of your website is just as important because it can help you evaluate what’s working and what isn’t, which can help you strategize how to improve your process or approach. If the point of your website is to gain a following or simply establish a strong online presence for your existing business, integrated marketing and analytics tools are definitely something to consider in a website builder.

• Community and support. When choosing a website builder, make sure it has some sort of community or support system in case you need guidance along the way. Check out the company’s blogs to see if it posts consistent content, or preview resources from the help center. This will give you an idea of whether or not you’ll get the help you need if you ever have an issue. If this is a new endeavor for you, this community will be valuable in creating a strong foundation for your new website.

5 key Wix benefits

Flexible and free. If you’re considering using Wix to build your website, you can try it out at no risk or cost. All you have to do is create an account and voila, you have your own site hosted with Wix. If you want upgraded features, such as your own domain or an ad-free environment, check out some of the Premium plan options in the next section. A free Wix account also gives you a lot of flexibility. You can build as many websites as you want and cancel your account at any time.

Unlimited customization. Whether you’re creating a website for personal or professional use, the main point is to make a good impression, right? Wix offers hundreds of templates to choose from, and you can customize them nearly any way you want. Choosing the right template is key for attracting new visitors and maintaining existing ones.

A strong landing page is especially important because that’s where it all starts. Not only do you want the landing page to be aesthetically pleasing, but you also want to ensure that it highlights features, like a call to action, that motivate visitors to subscribe to an email list or sign up as a member. The content itself is just as valuable as the design and images. Wix has a wide range of excellent landing page templates that can serve as both an inspiration and guide to the features you’ll want to include to get visitors to come to your site and stay awhile.

Application integration. Wix is a great option if you’re planning to use your website as an online store and want to ensure it’s as user-friendly as possible. Part of making a user-friendly site is ensuring that the applications are compatible and easy to integrate. It’s crucial to make the purchasing and transaction processes as easy as possible for the customer.

The Wix App Market has a large selection of apps to choose from (some free, some with a cost) that will integrate smoothly into the overall framework and design of your website. Integrating these apps into your site will give visitors a one-stop shop where they can buy a product, share it on social media, write a review, or contact a representative.

Artificial intelligence design. If the thought of building a website from scratch fills you with dread, there’s no need to fret. You don’t need to be an advanced computer programmer or web designer to get what you want. One of the coolest features of Wix is its Artificial Design Intelligence (ADI), which prompts you with several questions and generates different possibilities based on the personal or business needs you give in your answers.

But this isn’t a permanent decision. You can always choose a template to start with and customize it further to fit the content and message you want to convey. If you’re a novice, or simply short on time, this is a perfect way to get some of the tedious work done quickly and efficiently.

Ongoing inspiration and support. Making tweaks and updates to your website is how you’ll stay relevant. But consistently coming up with new ideas, or knowing how to implement them for that matter, can be exhausting. Luckily, the Wix Blog provides a robust selection of posts ranging from topics on crafting a strong email blast to tips on how to update your website. The content includes many how-tos and step-by-step guides.

If you want more specialized or technical support for your website, the Wix Help Center has many articles and topics to choose from. Wix’s frequent blog posts and Help Center are great for staying up to date with website updates and ideas to make sure your website is operating to its full potential.

How does Wix compare to other website builders?

If you’re shopping around, here are a few competitors and how they compare to Wix in some of the categories mentioned above.

Wix vs Shopify

Category	Wix	Shopify
Cost	Free Premium plans for individuals range from $13/month to $39/month Premium plans for businesses range from $23/month to $500/month	90-day free trial Premium plans range from $29/month to $299/month
Personal or business	Both. Wix can build websites and integrate various features that work well for personal, professional, and small and large businesses.	Business. Shopify’s website builder works best for small or large businesses that are e-commerce focused and want to integrate transaction tools such as shipping, payments, and point of sale.
Marketing and analytics	Depending on the account, there are several tools Wix provides that can help drive more people to your website: Wix SEO Wiz’s personalized plan and customized checklistIntegrated tools like Google Analytics and Facebook PixelEmail marketing integrated with automatic messages for customer managementVideo maker and chat feature to enhance the human connection with visitors	Shopify provides several tools that can help drive more people to your website: A discount code and coupon engineAdvertising credits (e.g., you can get $100 when you spend $25 in ads)Custom gift card creation
Customer service support	24-7 support via Wix callback service	24-7 support via Shopify Help Center or by contacting a Shopify representative

Wix vs Weebly

Category	Wix	Weebly
Cost	Free Premium plans for individuals range from $13/month to $39/month Premium plans for businesses range from $23/month to $500/month	Free Premium plans range from $6/month to $26/month
Personal or business	Both. Wix can build websites and integrate various features that work well for personal, professional, and small and large businesses.	Business. Weebly can build websites for your business. It specializes in e-commerce, which is great if you have a small business. Since Square acquired Weebly in 2018, it’s now even easier to make sales (in person or online).
Marketing and analytics	Depending on the account, there are several tools Wix provides that can help drive more people to your website: Wix SEO Wiz’s personalized plan and customized checklistIntegrated tools like Google Analytics and Facebook PixelEmail marketing integrated with automatic messages for customer managementVideo maker and chat feature to enhance the human connection with visitors	Weebly offers various marketing and analytical tools especially for e-commerce: E-commerce analytics with actionable SEO reportsEmail marketing with Weebly PromoteAnalytics to track sales vs orders
Customer service support	24-7 support via Wix callback service	24-7 support via Weebly Support (email) or by contacting a Weebly representative during standard operating hours

Wix vs WordPress

Category	Wix	WordPress
Cost	Free Premium plans for individuals range from $13/month to $39/month Premium plans for businesses range from $23/month to $500/month	Free Plans range from $4/month to $45/month (billed annually)
Personal or business	Both. Wix can build websites and integrate various features that work well for personal, professional, and small and large businesses.	Personal/professional. WordPress is best known for getting bloggers and their content on the map. In fact, they boast the “biggest community of online publishers.” If you’re a writer, freelancer, or entrepreneur, this is a good choice.
Marketing and analytics	Depending on the account, there are several tools Wix provides that can help drive more people to your website: Wix SEO Wiz’s personalized plan and customized checklistIntegrated tools like Google Analytics and Facebook PixelEmail marketing integrated with automatic messages for customer managementVideo maker and chat feature to enhance the human connection with visitors	WordPress gives you free rein when it comes to choosing what type of marketing or analytics you want to use for your site. You can explore various plugins and integrate them into your site.
Customer service support	24-7 support via Wix callback service	A support site and forums. For certain plans, a 24-7 live chat option is available.

Wix vs Squarespace

Category	Wix	Squarespace
Cost	Free Premium plans for individuals range from $13/month to $39/month Premium plans for businesses range from $23/month to $500/month	14-day free trial Premium plans range from $16/month to $46/month
Personal or business	Both. Wix can build websites and integrate various features that work well for personal, professional, and small and large businesses.	Both. Squarespace can build websites for personal, professional, and small and large businesses. If you’re always on the go, the Mobile Editing feature allows you to make changes to your site at any time.
Marketing and analytics	Depending on the account, there are several tools Wix provides that can help drive more people to your website: Wix SEO Wiz’s personalized plan and customized checklistIntegrated tools like Google Analytics and Facebook PixelEmail marketing integrated with automatic messages for customer managementVideo maker and chat feature to enhance the human connection with visitors	Squarespace offers various marketing and analytical tools, such as Website traffic and commerce analyticsEmail campaignsSocial stories with the Unfold app
Customer service support	24-7 support via Wix callback service	Squarespace Help contains guides, webinars, forums, and options to contact a representative

Overall, Wix is one of the many website builders out there with unique features and capabilities. This breakdown is just a snapshot of what you might get from each, but it’s up to you to choose the one that works best for your personal, professional, or business needs.

Wix plans and pricing

Your Wix website can be as simple or as complex as you want. This will determine whether your website is best suited for a free or Premium plan.

Wix provides several models that offer different features and come with different costs. Take a look at this brief overview of what options are available with Wix.

Is Wix free?

The short answer is yes. Wix is free, and it’s easy to open an account and build a website.

Starting with a free account can be useful to see if you like the interface and usability. If you’re on the fence about whether or not you want to upgrade, the free account allows you to create a website with no strings attached. There are, however, several limitations with a free account that can prevent you from customizing your site to the fullest, especially if you plan to use it for business purposes. Using the free Wix plan is best if

• You have no budget
• You don’t mind a simple website or a domain that isn’t customized
• You’re a beginner and uncertain about everything your website might need

Wix plans and pricing for personal use

If you’re a bit more established online as an accomplished blogger or freelancer (or you want to work toward that), upgrading to a Wix paid plan may be best.

These plans range from $13 per month to $39 per month. It’s up to you how much money you want to invest in your website. Do you want unlimited bandwidth? No ads? Do you want visitor analytics or site booster capabilities?

If you want more visibility online, upgrading to a paid plan will give you some of the extra bells and whistles not included in a free account. Purchasing one of the Premium Wix plans is best if

• You’re on a budget that allows for a small to moderate investment in your website
• You want to connect your website to a custom domain (as opposed to the Wix hosted one)
• You want to enhance your branding and site traffic with integrated marketing and analytics features

	Combo	Unlimited	Pro	VIP
Cost	$13/month	$17/month	$22/month	$39/month
Bandwidth	2 GB	Unlimited	Unlimited	Unlimited
Storage	3 GB	10 GB	20 GB	20 GB
Other features*	Remove Wix ads	Remove Wix ads, site booster, visitor analytics app	Remove Wix ads, site booster, visitor analytics app, events calendar, professional and social media logos	Remove Wix ads, site booster, visitor analytics app, events calendar, professional and social media logos, and VIP support

*Each personal plan comes with a free domain for one year.

Wix plans and pricing for business

Spreading information by word of mouth can help people get to know who you are, what you do, and what you sell or provide — and that’s a positive thing. But having a strong website for your customers isn’t just good for branding and visibility; it also helps to grow your business and maximize the potential of getting the word out about it.

Whether you’re in e-commerce or brick-and-mortar retail, having a website for your business is practically a requirement. We stay connected online, and it’s one of the primary ways we make purchases now, too. Wix offers plans that suit the needs of small and large businesses, with prices ranging from $23 per month to $49 per month. Purchasing one of the business Wix plans is best if

• You have a moderate to large budget to invest in your website
• You want powerful transactional features such as online payment capability
• You want unlimited bandwidth to ensure your website is always running smoothly, with little to no interruptions for your customers

	Business Basic	Business Unlimited	Business VIP
Cost	$23/month	$27/month	$49/month
Bandwidth	Unlimited	Unlimited	Unlimited
Storage	20 GB	35 GB	50 GB
Other features*	Remove Wix ads, site booster, visitor analytics app	Remove Wix ads, site booster, visitor analytics app, professional and social media logos	Remove Wix ads, site booster, visitor analytics app, unlimited video hours, professional and social media logos, and VIP support

*Each business plan accepts online payments.

Wix also offers an Enterprise business plan for $500 per month. If you’re interested in this plan, you must request a call for further information.

Overall, Wix offers a variety of plans to choose from. It’s up to you to select one that works best for you and the type of website you hope to build.

Adding online forms to Wix websites

Online forms are an integral part of almost any website. If you need to collect information from web visitors, you’ll want to embed a form on your Wix site.

As a freelance professional, for instance, you’ll likely need — at the very least — a contact form to field queries. If you’re an entrepreneur creating an e-commerce platform to sell products or services, you’ll want to include an order form equipped with a payment processor to collect shipping information and accept payment.

Maybe you want to take reservations for your small business via a booking form, or perhaps you want to capture prospects’ contact details for follow-up using a lead generation form.

For those without any technical know-how, the prospect of building a web form that’s precisely customized to your needs — payment gateway included — is daunting at best. Fortunately, there are plenty of online resources that make it quick and easy to both create custom forms and embed them on a Wix website. JotForm is one such tool.

Types of online forms available via JotForm

With over 10,000 free, ready-made templates to choose from, JotForm can help you fashion any kind of form under the sun. Here are just a few of the many different form templates JotForm offers:

• Order forms
• Payment forms
• Contact forms
• Registration forms
• Newsletter signup forms
• Opt-in forms
• Request forms
• Application forms
• Booking forms
• Feedback forms
• Membership forms
• File upload/download forms
• Donation forms
• Quote forms
• Consent forms
• Subscription forms
• RSVP forms
• Surveys and questionnaires

Why JotForm?

Back in the day, building robust web forms was expensive, complex, and time-consuming. You needed development expertise or at least the budget to pay for it. JotForm has changed the game for startups, nonprofits, and entrepreneurs by eliminating complexity and the burden of time and money when it comes to online form creation.

While the Form Builder comes with a range of advanced capabilities and customization tools, it’s super easy to use. In fact, much like Wix, it relies on intuitive drag-and-drop functionality, and you don’t need any coding skills to get a form up and running. Thanks to a huge selection of features, widgets, and integrations, JotForm is adept at giving you exactly what you need too.

For those building an online store or looking to accept donations, JotForm integrates securely with many of the more prominent payment processors that small businesses are already using.

JotForm payment forms for your Wix website

If you want to set up Wix with PayPal, Stripe, or Square, JotForm is a solid solution. That’s because the Form Builder allows users to effortlessly collect payment via these well-known gateways and an assortment of others (more than 30 total).

JotForm is such a popular option for payments on Wix websites that around 20 percent of Wix users on JotForm have a payment processor embedded in their forms. Linking your PayPal, Stripe, or Square account to JotForm is as simple as dragging this option onto your form, configuring your payment details, and clicking Connect.

To embed your payment form on your Wix website, all you need is your unique form URL (available once you publish your form). To learn how to navigate this process in just five basic steps, read our article about adding a form to your Wix site.

Conclusion

Is the Wix website builder the best option for you or your business? Only you can answer that question, but hopefully this guide has given you the information you need to make an informed decision.

When setting a parent element to display: flex, its child elements align left-to-right like this:

Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can do that with the flex-direction property (or with the flex-flow shorthand):

Okay, cool. But how would I do something like this with CSS Grid? As in, let’s say I want all those child elements to be aligned like this:

1 3 5 7
--------
2 4 6 8

…instead of this:

1 2 3 4
--------
5 6 7 8

By default, when I set a parent element to use CSS Grid, the elements will be positioned left-to-right just like flexbox. In the example below I’m telling the grid to have 6 columns and 2 rows, then let the child elements fill up each column of the first row before they fill up the columns of the second. You know, standard line wrapping behavior.

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 20px;
}

Basically what I want here is the opposite: I want our child elements to fill up column 1, row 1 and row 2, then move on to the next column. In other words, column wrapping! I know that if I create a grid with rows and columns I could individually place those elements into those positions. Like so:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 150px);
}

.child-1 {
  grid-column: 1;
  grid-row: 1;
}

.child-2 {
  grid-column: 1;
  grid-row: 2;
}

.child-3 {
  grid-column: 2;
  grid-row: 1;
}

/* etc, etc. */

Okay, neat! This gets me what I want but it’s a giant pain having to individually set the position of each item. It feels like I’m using position: absolute and it doesn’t feel particularly smart. So what if I just wanted this layout to be done for me, so that each new child element would align into the correct spot…correctly?

What I’m asking for (I think) is this: is there a CSS Grid version of flex-direction: column?

Well, after searching around a bit, Rachel Andrew pointed me to the correct answer in her rather excellent playground, Grid by Example. And as you can see in this demo, Rachel shows us how to do just that:

Neato! Rachel does this with the grid-auto-flow property: it tells a grid container how to fill the unoccupied space with child elements. So I can do that just by writing this:

.parent {
  display: grid;
  grid-auto-flow: column;
  /* set up columns and rows here */
}

By default, child elements of a grid will fill up each column until a row is filled, then it’ll flow into the next beneath it. This is why the default for grid-auto-flow is set to row because we’re filling up rows of the grid first. But if we set it to column, then each new element will fill up all the space of column 1 before moving on to column 2, etc.

.parent {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
}

This is what the flow part of grid-auto-flow means and for the longest time I ignored the property because it seemed (don’t laugh) scary. Just reading the word grid-auto-flow is enough to make me want to shut off my laptop and walk into the ocean.

But! It’s a pretty useful property and makes a ton of sense, especially if you think of it as the CSS Grid version of flex-direction.

---

The post grid-auto-flow : CSS Grid :: flex-direction : Flexbox appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

There’s a small line in the changelog that is is big news for CSS:

We’ve added support for CSS Conic Gradients (bug 1632351) and (bug 1175958).

???

Conic gradients are circular, just like their radial counterpart, but place color stops around the circle instead of from the center of the circle.

Adding more color stops gives it a “cone-like” appearance that’s fitting of the name:

Prior to Firefox 83, cross-browser support for conic gradients meant using a polyfill, like this one from Lea Verou. But browser support is much nicer with Firefox in the mix.

---

And wouldn’t you know it! We just so happen to have a brand-spankin’ new CSS Gradients guide that not only covers conic gradients, but linear, radial, and repeating gradients as well, including explanations, examples and, of course, plenty of CSS tricks sprinkled in along the way.

One of those tricks? Using hard color stops to create a pie chart.

Direct Link to Article — Permalink

---

The post Firefox 83 appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and down, you can place items across grid lines creating a staggered effect that looks pretty rad. Grid-like, but it appears to align to diagonal lines rather than horizontal and vertical lines because of the staggering. And you still get all the flexibility of grid!

Direct Link to Article — Permalink

---

The post Thinking Outside the Box with CSS Grid appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

This article focuses adding WebGL effects to and elements of an already “completed” web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject by distilling the process into a few steps:

• Create a web page as you normally would.
• Render pieces that you want to add WebGL effects to with WebGL.
• Create (or find) the WebGL effects to use.
• Add event listeners to connect your page with the WebGL effects.

Specifically, we’ll focus on the connection between regular web pages and WebGL. What are we going to make? How about a draggle image slider with an interactive mouse hover!

We won’t cover the core functionality of slider or go very far into the technical details of WebGL or GLSL shaders. However, there are plenty of comments in the demo code and links to outside resources if you’d like to learn more.

We’re using the latest version of WebGL (WebGL2) and GLSL (GLSL 300) which currently do not work in Safari or in Internet Explorer. So, use Firefox or Chrome to view the demos. If you’re planning to use any of what we’re covering in production, you should load both the GLSL 100 and 300 versions of the shaders and use the GLSL 300 version only if curtains.renderer._isWebGL2 is true. I cover this in the demo above.

First, create a web page as you normally would

You know, HTML and CSS and whatnot. In this case, we’re making an image slider but that’s just for demonstration. We’re not going to go full-depth on how to make a slider (Robin has a nice post on that). But here’s what I put together:

1. Each slide is equal to the full width of the page.
2. After a slide has been dragged, the slider continues to slide in the direction of the drag and gradually slow down with momentum.
3. The momentum snaps the slider to the nearest slide at the end point.
4. Each slide has an exit animation that’s fired when the drag starts and an enter animation that’s fired when the dragging stops.
5. When hovering the slider, a hover effect is applied similar to this video.

I’m a huge fan of the GreenSock Animation Platform (GSAP). It’s especially useful for us here because it provides a plugin for dragging, one that enables momentum on drag, and one for splitting text by line . If you’re uncomfortable creating sliders with GSAP, I recommend spending some time getting familiar with the code in the demo above.

Again, this is just for demonstration, but I wanted to at least describe the component a bit. These are the DOM elements that we will keep our WebGL synced with.

Next, use WebGL to render the pieces that will contain WebGL effects

Now we need to render our images in WebGL. To do that we need to:

1. Load the image as a texture into a GLSL shader.
2. Create a WebGL plane for the image and correctly apply the image texture to the plane.
3. Position the plane where the DOM version of the image is and scale it correctly.

The third step is particularly non-trivial using pure WebGL because we need to track the position of the DOM elements we want to port into the WebGL world while keeping the DOM and WebGL parts in sync during scroll and user interactions.

There’s actually a library that helps us do all of this with ease: CurtainsJS! It’s the only library I’ve found that easily creates WebGL versions of DOM images and videos and syncs them without too many other features (but I’d love to be proven wrong on that point, so please leave a comment if you know of others that do this well).

With Curtains, this is all the JavaScript we need to add:

// Create a new curtains instance
const curtains = new Curtains({ container: "canvas", autoRender: false });
// Use a single rAF for both GSAP and Curtains
function renderScene() {
  curtains.render();
}
gsap.ticker.add(renderScene);
// Params passed to the curtains instance
const params = {
  vertexShaderID: "slider-planes-vs", // The vertex shader we want to use
  fragmentShaderID: "slider-planes-fs", // The fragment shader we want to use
  
 // Include any variables to update the WebGL state here
  uniforms: {
    // ...
  }
};
// Create a curtains plane for each slide
const planeElements = document.querySelectorAll(".slide");
planeElements.forEach((planeEl, i) => {
  const plane = curtains.addPlane(planeEl, params);
  // const plane = new Plane(curtains, planeEl, params); // v7 version
  // If our plane has been successfully created
  if(plane) {
    // onReady is called once our plane is ready and all its texture have been created
    plane.onReady(function() {
      // Add a "loaded" class to display the image container
      plane.htmlElement.closest(".slide").classList.add("loaded");
    });
  }
});

We also need to update our updateProgress function so that it updates our WebGL planes.

function updateProgress() {
  // Update the actual slider
  animation.progress(wrapVal(this.x) / wrapWidth);
  
  // Update the WebGL slider planes
  planes.forEach(plane => plane.updatePosition());
}

We also need to add a very basic vertex and fragment shader to display the texture that we’re loading. We can do that by loading them via tags, like I do in the demo, or by using backticks as I show in the final demo.

Again, this article will not go into a lot of detail on the technical aspects of these GLSL shaders. I recommend reading The Book of Shaders and the WebGL topic on Codrops as starting points.

If you don’t know much about shaders, it’s sufficient to say that the vertex shader positions the planes and the fragment shader processes the texture’s pixels. There are also three variable prefixes that I want to point out:

• ins are passed in from a data buffer. In vertex shaders, they come from the CPU (our program). In fragment shaders, they come from the vertex shader.
• uniforms are passed in from the CPU (our program).
• outs are outputs from our shaders. In vertex shaders, they are passed into our fragment shader. In fragment shaders, they are passed to the frame buffer (what is drawn to the screen).

Once we’ve added all of that to our project, we have the same exact thing before but our slider is now being displayed via WebGL! Neat.

CurtainsJS easily converts images and videos to WebGL. As far as adding WebGL effects to text, there are several different methods but perhaps the most common is to draw the text to a and then use it as a texture in the shader (e.g. 1, 2). It’s possible to do most other HTML using html2canvas (or similar) and use that canvas as a texture in the shader; however, this is not very performant.

Create (or find) the WebGL effects to use

Now we can add WebGL effects since we have our slider rendering with WebGL. Let’s break down the effects seen in our inspiration video:

1. The image colors are inverted.
2. There is a radius around the mouse position that shows the normal color and creates a fisheye effect.
3. The radius around the mouse animates from 0 when the slider is hovered and animates back to 0 when it is no longer hovered.
4. The radius doesn’t jump to the mouse’s position but animates there over time.
5. The entire image translates based on the mouse’s position in reference to the center of the image.

When creating WebGL effects, it’s important to remember that shaders don’t have a memory state that exists between frames. It can do something based on where the mouse is at a given time, but it can’t do something based on where the mouse has been all by itself. That’s why for certain effects, like animating the radius once the mouse has entered the slider or animating the position of the radius over time, we should use a JavaScript variable and pass that value to each frame of the slider. We’ll talk more about that process in the next section.

Once we modify our shaders to invert the color outside of the radius and create the fisheye effect inside of the radius, we’ll get something like the demo below. Again, the point of this article is to focus on the connection between DOM elements and WebGL so I won’t go into detail about the shaders, but I did add comments to them.

But that’s not too exciting yet because the radius is not reacting to our mouse. That’s what we’ll cover in the next section.

I haven’t found a repository with a lot of pre-made WebGL shaders to use for regular websites. There’s ShaderToy and VertexShaderArt (which have some truly amazing shaders!), but neither is aimed at the type of effects that fit on most websites. I’d really like to see someone create a repository of WebGL shaders as a resource for people working on everyday sites. If you know of one, please let me know.

Add event listeners to connect your page with the WebGL effects

Now we can add interactivity to the WebGL portion! We need to pass in some variables (uniforms) to our shaders and affect those variables when the user interacts with our elements. This is the section where I’ll go into the most detail because it’s the core for how we connect JavaScript to our shaders.

First, we need to declare some uniforms in our shaders. We only need the mouse position in our vertex shader:

// The un-transformed mouse position
uniform vec2 uMouse;

We need to declare the radius and resolution in our fragment shader:

uniform float uRadius; // Radius of pixels to warp/invert
uniform vec2 uResolution; // Used in anti-aliasing

Then let’s add some values for these inside of the parameters we pass into our Curtains instance. We were already doing this for uResolution! We need to specify the name of the variable in the shader, it’s type, and then the starting value:

const params = {
  vertexShaderID: "slider-planes-vs", // The vertex shader we want to use
  fragmentShaderID: "slider-planes-fs", // The fragment shader we want to use
  
  // The variables that we're going to be animating to update our WebGL state
  uniforms: {
    // For the cursor effects
    mouse: { 
      name: "uMouse", // The shader variable name
      type: "2f",     // The type for the variable - https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html
      value: mouse    // The initial value to use
    },
    radius: { 
      name: "uRadius",
      type: "1f",
      value: radius.val
    },
    
    // For the antialiasing
    resolution: { 
      name: "uResolution",
      type: "2f", 
      value: [innerWidth, innerHeight] 
    }
  },
};

Now the shader uniforms are connected to our JavaScript! At this point, we need to create some event listeners and animations to affect the values that we’re passing into the shaders. First, let’s set up the animation for the radius and the function to update the value we pass into our shader:

const radius = { val: 0.1 };
const radiusAnim = gsap.from(radius, { 
  val: 0, 
  duration: 0.3, 
  paused: true,
  onUpdate: updateRadius
});
function updateRadius() {
  planes.forEach((plane, i) => {
    plane.uniforms.radius.value = radius.val;
  });
}

If we play the radius animation, then our shader will use the new value each tick.

We also need to update the mouse position when it’s over our slider for both mouse devices and touch screens. There’s a lot of code here, but you can walk through it pretty linearly. Take your time and process what’s happening.

const mouse = new Vec2(0, 0);
function addMouseListeners() {
  if ("ontouchstart" in window) {
    wrapper.addEventListener("touchstart", updateMouse, false);
    wrapper.addEventListener("touchmove", updateMouse, false);
    wrapper.addEventListener("blur", mouseOut, false);
  } else {
    wrapper.addEventListener("mousemove", updateMouse, false);
    wrapper.addEventListener("mouseleave", mouseOut, false);
  }
}


// Update the stored mouse position along with WebGL "mouse"
function updateMouse(e) {
  radiusAnim.play();
  
  if (e.changedTouches && e.changedTouches.length) {
    e.x = e.changedTouches[0].pageX;
    e.y = e.changedTouches[0].pageY;
  }
  if (e.x === undefined) {
    e.x = e.pageX;
    e.y = e.pageY;
  }
  
  mouse.x = e.x;
  mouse.y = e.y;
  
  updateWebGLMouse();
}


// Updates the mouse position for all planes
function updateWebGLMouse(dur) {
  // update the planes mouse position uniforms
  planes.forEach((plane, i) => {
    const webglMousePos = plane.mouseToPlaneCoords(mouse);
    updatePlaneMouse(plane, webglMousePos, dur);
  });
}


// Updates the mouse position for the given plane
function updatePlaneMouse(plane, endPos = new Vec2(0, 0), dur = 0.1) {
  gsap.to(plane.uniforms.mouse.value, {
    x: endPos.x,
    y: endPos.y,
    duration: dur,
    overwrite: true,
  });
}


// When the mouse leaves the slider, animate the WebGL "mouse" to the center of slider
function mouseOut(e) {
  planes.forEach((plane, i) => updatePlaneMouse(plane, new Vec2(0, 0), 1) );
  
  radiusAnim.reverse();
}

We should also modify our existing updateProgress function to keep our WebGL mouse synced.

// Update the slider along with the necessary WebGL variables
function updateProgress() {
  // Update the actual slider
  animation.progress(wrapVal(this.x) / wrapWidth);
  
  // Update the WebGL slider planes
  planes.forEach(plane => plane.updatePosition());
  
  // Update the WebGL "mouse"
  updateWebGLMouse(0);
}

Now we’re cooking with fire! Our slider now mets all of our requirements.

Two additional benefits of using GSAP for your animations is that it provides access to callbacks, like onComplete, and GSAP keeps everything perfectly synced no matter the refresh rate (e.g. this situation).

You take it from here!

This is, of course, just the tip of the iceberg when it comes to what we can do with the slider now that it is in WebGL. For example, common effects like turbulence and displacement can be added to the images in WebGL. The core concept of a displacement effect is to move pixels around based on a gradient lightmap that we use as an input source. We can use this texture (that I pulled from this displacement demo by Jesper Landberg — you should give him a follow) as our source and then plug it into our shader.

To learn more about creating textures like these, see this article, this tweet, and this tool. I am not aware of any existing repositories of images like these, but if you know of one please, let me know.

If we hook up the texture above and animate the displacement power and intensity so that they vary over time and based on our drag velocity, then it will create a nice semi-random, but natural-looking displacement effect:

It’s also worth noting that Curtains has its own React version if that’s how you like to roll.

That’s all I’ve got for now. If you create something using what you’ve learned from this article, I’d love to see it! Connect with me via Twitter.

---

The post Creating WebGL Effects with CurtainsJS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

GitHub Actions are like free computers.

Well, there is pricing, but even free plans get 2,000 minutes a month. You write configuration files for what you want these computers to do. Those configuration files go into a repo, so typically they do things specific to that repo. I’m sure that CI/CD is vast majority of GitHub Actions usage. That is, running your tests, and deploying your code. Which is absolutely fantastic.

But like I said, GitHub Actions are computers, so you can have them run whatever code you like. (I’m sure there is EULA stuff you are bound to, but you know what I mean.) Just like everybody’s favorite, serverless functions, GitHub Actions can do that same stuff. Wanna run a build process? Hit an API? Optimize images? Screenshot a URL? Do it up. Most actions are tied to specific events, like “run this code when I commit to a branch” or “run this code against this pull request.” But you can also schedule them on a cron schedule.

So you’ve got a free computer for 2,000 minutes a month you can run on a schedule. I’m sure that will breed some pretty interesting creativity, especially since GitHub Actions is a marketplace. Allow me to get around to the title of this post… I find Upptime an incredible clever usage of all this. You essentially get a free configurable uptime monitor for whatever you want.

Direct Link to Article — Permalink

---

The post Upptime appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Personalization; it’s probably one of the most important design trends to emerge in recent years.

As consumers in all industries become more demanding, they’re increasingly searching for online experiences that are customized to suit their individual needs and expectations.

Today, personalization exists in virtually every digital interaction, from adverts on social media to PPC campaigns and email marketing efforts.

Used correctly, the manipulation of demographic, behavioral, and other in-depth user-data can help designers to create dynamic, highly customized content for each website user. At the same time, these unique websites ensure that designers really make an impact on behalf of their clients, outshining the competition and driving amazing results.

What is Hyper-Personalization?

Basic personalization in web design involves making changes to a design based on what you know about your client’s target audience.

For instance, if you knew that you were designing for an audience that spends more time on their smartphone than their computer, you’d concentrate on building hyper-responsive experiences for small screens. For instance, the Canals-Amsterdam.nl website is specifically designed to support people using smartphones to swipe, tap, and scroll.

If you’re aware that your customer’s target market is other businesses, you might put more testimonials, free demo CTAs and other enticing components on the website to encourage investment.

Hyper-Personalization is an emerging trend for 2020 that focuses on going beyond the basic understanding of a target audience, to look at genuine customer data. Hyper-personalization is all about leveraging in-depth omnichannel data to drive more advanced customer experiences on every page of a website.

For hyper-personalization to be genuinely effective, designers need access to virtually unlimited data, from CMS systems, sales teams, marketing experts, and more. When you have that data handy, you can use it to:

• Design websites that showcase dynamic CTAs, featuring content relevant to each user;
• Implement sign-in screens for customers vs. demo requests for new leads on home pages;
• Showcase products similar to past pages when repeat customers return to a site.

Why is Hyper-Personalization Important?

Personalized experiences have always been important to the sales journey.

However, in an era where companies are constantly competing to grab user attention, you can’t just cater to your site designs to a group of people anymore. Increasingly, users are expecting specific interactive moments on websites, made just for them.

Amazon is an obvious example to consider here. As one of the world’s leading online shopping sites, Amazon’s efforts with website personalization are incredible. The Amazon website uses tools integrated into the back-end of the marketplace to watch everything a customer does on its platform.

As users browse through the website, the site jots down each category that you look at, and which items interest you. Thanks to this, Amazon can suggest which products you may be most interested in.

Websites like Madebyhusk also offer an incredible insight into hyper-personalization, allowing users to browse for the products that appeal to them based on in-depth filters like edging and color.

The result is a higher chance of conversion.

When customers feel as though they have complete control over their buyer journey, and that each step on that journey is tailored to them, they’re more likely to buy.

Better Converting CTAs

A call to action is an excellent way to move things along when you’re encouraging the buying process with your target audience.

Used correctly, your CTAs can encourage more than just cart conversions. They can also convince people to sign up for your newsletter via a subscription form, take a survey, or begin a free demo.

Regardless of the CTAs that you choose to implement, personalization will quickly make your requests more effective. According to studies, CTAs that are personalized are 202% more effective than generic alternatives.

For instance, Byhumankind.com uses a crucial statement: “Great personal care products don’t have to come at earth’s expense.” Followed by an engaging CTA to drive positive action from their audience. The company knows that they’re appealing to a customer interested in saving the planet, so they make the benefits of “Getting Started” obvious immediately.

Using data provided by clients, designers can figure out exactly how to position CTAs and offers for customers. For instance, notice that Humankind has a green colored CTA button.

Most buttons take advantage of bold colors like red and orange, but the green shade for Humankind further highlights the nature-driven personality of the brand.

Relevant Product Recommendations

Repeat customers are infinitely more valuable than people who purchase just one item from your site.

However, convincing a standard customer to become a repeat client isn’t easy. Sometimes, clients need a push to determine what they want to buy next.

Fortunately, as a website designer, you can help with that. Using dynamic modules in the product pages of your customer’s website, you can show individual end-users what they might want to purchase next from a specific brand.

These dynamic modules can use information about what each customer has purchased in the past, to suggest a new product or service. Amazon do particularly well in this regard, leveraging a vast marketplace and treasure trove of information to make quality recommendations. But you don’t need to be designing a considerable website for a global business like Amazon to take advantage of dynamic suggestions. Any business with a focus on hyper-personalization can benefit from this strategy.

Increased Time on Site

Any form of personalization on a website can significantly improve the amount of time a customer spends in that digital environment.

Imagine walking into a restaurant that seems as though it was designed specifically for you. The décor, the seating arrangements, and even the menu are customized to your taste. You’re more likely to spend your time and money there than on any generic food place you find on the street.

The same rules apply to website design. The more hyper-personalized you can get with your client’s design, based on what you know about their customers, the easier it will be to keep customers engaged.

For instance, the WarnerMusic.no website entices visitors with various high-quality images of popular bands and artists, before providing them with endless information about the brand and what it does. The designer of this site knew that it needed to appeal to the visual demands of the audience first, before offering useful information like featured artist lists, News, and blog posts to keep the users on site.

Hyper personalization is all about figuring out what kind of end-user you’re designing for, so you can build the digital environment that’s more engaging and compelling to them. Some designers even create dynamic pages that change depending on whether a customer is a repeat client or a new visitor.

Improved Loyalty and Affinity

Finally, it’s human nature that we all want to spend time with the people that treat us best.

We all value excellent customer service, which is why customer experience is the most significant differentiating factor for any organization today.

Web-based personalization works in a similar way. When you use your design tools to make the site experience that you give to each visitor warm, individualized, and welcoming, then your clients are sure to see a boost in customer loyalty.

Around 79% of consumers say that they’ll only consider buying from brands that care about them. As a designer, you can convince every website visitor that they’re going to get the experience they deserve. Just look at how TheHappyHero.com instantly lets clients know that they can expect a fun and friendly interaction on every page.

Accessing useful data from the companies that you’re working with before you begin developing and designing a website could be the key to creating happier customers and higher conversions.

The more delighted end-users are with the experience that a website gives them, the happier that your client will be with you – increasing the impact of your design portfolio.

If you can create customer loyalty and affinity for your client, then you will be able to develop the same feelings between yourself and your client. This could mean that you earn more recommendations as a designer and build your position as a leader in the industry.

Hyper-Personalization is Crucial for 2021

As companies continue to worry about how they can safely use data without crossing the line when it comes to customer privacy, hyper-personalization has stayed just out of the mainstream. While it may be a while before we see every website designer starting their process with piles of in-depth data, it seems that we are heading in that direction.

Customers in 2021 and beyond will undoubtedly want a more advanced and customized experience from the brands that they interact with – particularly in an era where it’s becoming much easier to deliver meaningful moments online.

Source

Just like any other area of our lives, healthcare has been heavily digitalized in the recent past. Technology is revolutionizing modern medicine, and this influence is especially noticeable in patient care.

With numerous technically advanced eHealth solutions, doctors can do their work more efficiently, while patients can feel less anxious about an upcoming hospital visit.

In general, any technology that allows health practitioners to connect with their clientele is called patient engagement technology. According to one article, such tools “have patient and healthcare navigation capabilities, support chronic disease management programs, and connect patients with their care using remote patient monitoring capabilities.”

There is a wide variety of patient engagement solutions, and due to high competition, digital medical solutions are becoming more affordable and accessible. In this article, we’ll take a look at three of the most influential technologies for patient care.

1. Telemedicine

Telemedicine has proven itself as one of the most helpful eHealth tools during the COVID-19 pandemic. When it comes to patient care, telehealth is invaluable now, as it offers contactless medical consultations that take less time than a traditional hospital visit. This technology is also great when it comes to an urgent need for a healthcare specialist, for example, when someone is having a stroke.

The apps offered to users are mainly direct-to-consumer (DTC) telemedicine solutions and can be delivered in three primary ways:

• By a care provider with whom the patients have an established, traditional doctor-patient relationship. This option is the most comfortable for many as you can choose whether to visit your doctor in person or digitally.
• By a different care provider from the same organization as the primary care provider. This approach is also quite convenient as the two healthcare providers will be able to share patients’ data and use it for treatment purposes more easily.
• By a care provider from an organization outside the patients’ medical home, where there is little or no previous doctor-patient relationship or coordination with the patients’ primary care provider. Such telemedicine companies are independent and can either cooperate with insurance companies and medical organizations or get direct payments from users for the offered services.

As people become more tech-savvy, they sometimes feel more comfortable with having an online medical consultation. Meanwhile, doctors get a chance to work with more patients when using HIPAA compliant teletherapy. Thus, telehealth is projected to become even better adopted in 2021.

2. Artificial intelligence

AI helps healthcare professionals with decision making and data organization. It also allows medical staff to stress out less because of their job.

When talking about more specific uses in patient care, artificial intelligence is great for diagnosing diseases and providing personalized treatment. Both these processes can require a lot of time and resources, so AI helps to optimize them. This is especially helpful during a healthcare crisis like the current pandemic.

Artificial intelligence and machine learning can be trained to follow the same patterns doctors do when making a diagnosis. There is one obstacle on the way of AI/ML becoming the ultimate tool for disease diagnosing: it needs a lot of digital examples to learn from. Only a fraction of all data is currently available as electronic health records, even in countries with advanced medical systems. Thus, the full potential of artificial intelligence in healthcare will probably be realized later than 2021.

Still, there are cases where an accurate diagnosis can be made by an AI algorithm now. According to Data Revenue, they include:

• CT scans for lung cancer or stroke detection;
• electrocardiograms and cardiac MRI images for the risk assessment of sudden cardiac death or heart diseases;
• skin images for skin conditions identification;
• eye images for diabetic retinopathy indication.

AI is extremely useful for patient care in the form of chatbots, too. A patient can get an initial estimation of their condition without a doctor appointment. After answering a few questions, you can at least know the first steps of treating your disease, which can be life-saving before you get a chance to visit a hospital.

3. IoT

The Internet of Things also has several great uses in healthcare and patient care in particular. Specifically, this technology is a savior for hospitals and other medical facilities as it helps to streamline the treatment process and organize all the activities that can be unified by an IoT system.

We all know that patients are often irresponsible when it comes to taking their medicine or doing something else that’s part of their treatment process. You can create an IoT app, connect it with IoT devices, so healthcare professionals can keep an eye on their patients and remind them about a necessary activity, whether the patient is in a hospital or at home.

If the Internet of Things technology is used in hospital rooms to modernize and digitalize them, the results can be outstanding. The doctors can keep track of the treatment process and ensure optimal patient condition at all times. Meanwhile, the patients and their loved ones can also take a detailed look at the treatment. This helps to understand what are the exact procedures assigned to you, as well as get updates on the treatment process.

IoT can be vital if an emergency happens, too. With the Internet of Things, it’s possible to send both manual and automatic alerts to medical staff if the patient’s condition gets worse unexpectedly, resulting in timely treatment.

Besides, IoT works great in combination with AI/ML. All the treatment data processed through the Internet of Things system can be used to create and enhance algorithms for assigning correct treatment with the help of just artificial intelligence.

Conclusion

A modern human can’t imagine their life without technology anymore. Healthcare is an important part of our lives, especially in 2020, and it will likely remain so for at least the first half of 2021. For that reason, it’s crucial to use technological advancement to enhance medicine, as it will benefit both healthcare staff and their patients.

Thankfully, we have the tools required to improve patient care at our hands. If solutions like telemedicine, AI, IoT, and others are used wisely, we will be better prepared for another health crisis. But hopefully, we won’t have to face anything like the current pandemic and will use digital health solutions in a healthier world overall.

---

Photo by National Cancer Institute on Unsplash

Chris made a few notes about Core Web Vitals the other day, explaining why measuring these performance metrics are so gosh darn important:

I still think the Google-devised Core Web Vitals are smart. When I first got into caring about performance, it was all: reduce requests! cache things! Make stuff smaller! And while those are all very related to web performance, they are abstractly related. Actual web performance to users are things like how long did I have to wait to see the content on the page? How long until I can actually interact with the page, like type in a form or click a link? Did things obnoxiously jump around while I was trying to do something? That’s why Core Web Vitals are smart: they measure those things.

There’s certainly a lot of tools out there that help you measure these extremely important metrics. Chris’ post was timely because where I work at Sentry¹, we’re launching our own take on this. My favorite once-a-year-blogger and mentor at Sentry, Dora Chan, explained why using real user data is important when it comes to measuring Web Vitals and how our own product is approaching it:

Google Web Vitals can be viewed using the Google Chrome Lighthouse extension. You may be asking yourself, “Why would I need Sentry to see what these are if I already have Google?” Good question. Google provides synthetic lab data, where you can directly control your environment, device, and network speed. This is good and all, but it only paints part of the picture. Paint. Get it?

Sentry gathers aggregate field data on what your users actually experience when they engage with your application. This includes context on variable network speed, browser, device, region, and so forth. With Web Vitals, we can help you understand what’s happening in the wild, how frequently it’s happening, why, and what else is connected to the behavior.

Sentry breaks down all these transactions into the most important metrics so you can see how your customers are experiencing performance problems. Perhaps 42% of the time a transaction has an input delay of more than 301ms. Sentry would show that problem and how it correlates with other performance issues.

I think this is the power of tying Core Web Vitals with user data — or what Dora calls “field data” — because some of our users are experiencing a fast app! They have great wifi! All the wifis! That’s great and all, but there are still users on the other side who put up with a more miserable experience, and having a visual based on actual user data allows us to see which specific actions are slowing things down. This information is what gives us the confidence to hop into the codebase and then fix the problem, but it also helps prioritize these problems in the first place. That’s something we don’t really talk about when it comes to performance.

What’s the most important performance problem with your app right now? This is a trickier question than we might like to admit. Perhaps a First Paint of five seconds isn’t a dealbreaker on the settings page of your app but three seconds on the checkout page is unbearable for the business and customers alike.

So, yeah, performance problems are weird like that; the same result of a metric can mean different things based on the context. And some metrics are more important than others depending on that context.

That’s really why I’m so excited about all these tools. Viewing how users are experiencing an app in real time and then, subsequently, visualizing how the metrics change over time — that’s just magic. Lighthouse scores are fine and dandy, and, don’t get me wrong, they are very useful. They’re just not an extremely accurate measure of how users actually use your app based on your data.

This is where another Sentry feature comes into play. After you’ve signed up and configured everything, head to the Performance section and you’ll see which transactions are getting better over time and which have regressed, or gotten slower:

Tony Xiao is an engineer at Sentry and he wrote about how he used this feature to investigate a front-end problem. That’s right: we use Sentry to measure our Sentry work (whoa, inception). By looking at the Most Regressed Transactions report, Tony was able to dig into the specific transaction that triggered a negative result and identify the problem right then and there. Here’s how he described it:

To a fault, code is loyal to its author. It’s why communicating with your code is critical. And it’s why trends in performance monitoring is so valuable: it not only helps you understand the ups and downs, but it can help point you in the right direction.

Anyway, I’m not really trying to sell you on Sentry here. I’m more interested in how the field of front-end development is changing and I think it’s super exciting that all of these tools in the industry are coming together at this moment in time. It feels like our understanding of performance problems is getting better — the language, the tools, the techniques are all evolving and a tide is turning in our industry.

And that’s something to celebrate.

---

The post Measuring Core Web Vitals with Sentry appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.