Here’s a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for “seasonal” colors (e.g. spring is greens, fall is oranges). You’d then use the values to theme your site, knowing that those colors change slightly from day to day.

This is what I got while writing this:

:root {
  --seasonal-bg: hsl(-68.70967741935485,9.419354838709678%,96%);
  --seasonal-bgdark: hsl(-68.70967741935485,9.419354838709678%,90%);
  --seasonal-fg: hsl(-68.70967741935485,9.419354838709678%,30%);
  --seasonal-hl: hsl(-83.70967741935485,30.000000000000004%,50%);
  --seasonal-hldark: hsl(-83.70967741935485,30.000000000000004%,35%);
}

I think it would be more fun if the CSS file provided was just the custom properties and not the opinionated other styles (like what sets the body background and such). That way you could implement the colors any way you choose without any side effects.

This makes me think that a CDN-hosted CSS file like this could have other useful stuff, like today’s date for usage in pseudo content, or other special time-sensitive stuff. Maybe the phase of the moon? Sports scores?! Soup of the day?!

/* <div class="soup">The soup of the day is: </div> */
.soup::after {
  content: var(--soupOfTheDay); /* lol kinda */
}

It’s almost like a data API that is tremendously easy to use. Pseudo content is even accessible content these days — but you can’t select the text of pseudo-elements, so don’t read this as an actual endorsement of using CSS as a content API.

Will Boyd just blogged about what is possible to put in a custom property. They are tremendously flexible. Just about anything is a valid custom property value and then the usage tends to behave just how you think it will.

body {
  /* totally fine */
  --rgba: rgba(255, 0, 0, 0.1);
  background: var(--rgba);

  /* totally fine */
  --rgba: 255, 0, 0, 0.1;
  background: rgba(var(--rgba));

  /* totally fine */
  --rgb: 255 0 0;
  --a: 0.1;
  background: rgb(var(--rgb) / var(--a));
}

body::after {
  /* totally fine */
  --song: "I need quotes to be pseudo content A and can't have line breaks without this weird hack A but still fairly permissive (💧💧💧) ";
  content: var(--song);
  white-space: pre;
}

Bram Van Damme latched onto that flexiblity while covering Will’s article:

That’s why you can use CSS Custom Properties to:

• perform conditional calculations

• pass data from within your CSS to your JavaScript

• inject skin tone / hair color modifiers onto Emoji

• toggle multiple values with one custom property (--foo: ; hack)

Bram points out this “basic” state-flipping quality that a custom property can pull off:

:root {
  --is-big: 0;
}

.is-big {
  --is-big: 1;
}

.block {
  padding: calc(
    25px * var(--is-big) +
    10px * (1 - var(--is-big))
  );
  border-width: calc(
    3px * var(--is-big) +
    1px * (1 - var(--is-big))
  );
}

Add a couple of scoops of complexity and you get The Raven (media queries with custom properties).

Will calls them “CSS variables” which is super common and understandable. You’ll read (and I have written) sentences often that are like “CSS variables (a.k.a CSS Custom Properties)” or “CSS Custom Properties (a.k.a CSS Variables.” Šime Vidas recently noted there is a rather correct way to refer to these things: --this-part is the custom property and var(--this-part) is the variable, which comes right from usage in the spec.

And that reminds me of this Vue proposal. I’m not sure if it went anywhere, but the state of a component would automatically be exposed as CSS custom properties.

<template>
  <div class="text">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

By virtue of having color as part of the state of this component, then --color is available as state to the CSS of this component. I think that’s a great idea.

What if every time you used useState in React, CSS custom properties were put on the :root and were updated automatically. For example, if you did this:

import React, { useState } from 'https://cdn.skypack.dev/react@^16.13.1';
import ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';

const App = () => {
  const [ activeColor, setActiveColor ] = useState("red");
  return(
    <div className="box">
      <h1>Active Color: {activeColor}</h1>
      <button onClick={() => {setActiveColor("red")}}>red</button>
      <button onClick={() => {setActiveColor("blue")}}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

And you knew you could do like:

.box {
  border-color: 2px solid var(--activeColor);
}

Because the state automatically mapped itself to a custom property. Someone should make a useStateWithCustomProperties hook or something to do that. #freeidea

Libraries like React and Vue are for building UI. I think it makes a lot of sense that the state that they manage is automatically exposed to CSS.

And speaking of state that CSS should know about, I’ve seen quite a few demos that do fun stuff by mapping over things, like the current mouse position or scroll position, over to CSS. I don’t think it’s entirely unreasonable to ask for that data to be natively exposed to CSS. We already have the concept of environment variables, like env(safe-area-inset-top), and I could see that being used to expose page state, like env(page-scroll-percentage) or env(mouseY).

---

The post Custom Properties as State appeared first on CSS-Tricks.

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

Between partnering with influencers for social media posts or optimizing landing pages for PPC campaigns, there are plenty of ways for marketers to promote and share products and services. But despite all the available options, there’s one channel that has stood the test of time.

Email marketing has always played an important role in reaching customers, and still does today. In fact, 60% of consumers say that email is their preferred channel for promotional messages.

Rather than having your promotions be mindlessly scrolled through, email marketing can better connect your brand with customers and subscribers. You’re more likely to grab the customer’s attention if you’re directly placed in their inbox, and with personalized content, you can easily increase conversion rates.

In this post, we’ll cover the 9 must-have emails to send to your customers and subscribers.

Types of Emails (+ Examples)

For your email marketing efforts to be most effective, you need a variety of content fit for different customer segments and different stages of the buyer’s journey. Having a variety will lead to better engagement with higher open and click-through rates, as well as the opportunity to increase sales through personalized offers and promotions.

Here are different types of email content to send, including examples from top-brands.

1. Welcome

Welcome emails have become a fixture in the customer experience. Customers now expect some type of welcome as soon as they make a purchase, sign up for a newsletter, start a product trial, or subscribe to your mailing list.

This email sets the stage for future interactions, and plays an important role in whether a customer will continue to engage with your brand or quickly unsubscribe. Customers who receive a welcome email show 33% more engagement.

Key elements of a welcome email include:

• Introducing your brand
• Thanking the customer for subscribing
• Providing guidance for what to do or expect next

Content will vary depending on the customer and the reason they are on your mailing list. For example, if you are welcoming a customer that signed up for a product trial, it would be helpful to include tips for using the product and a link to your FAQ.

This welcome email from Nordstrom strikes the right balance of being welcoming, while also guiding customers to their store. It uses a high-quality image, a welcoming headline, and a straightforward call to action.

What works:

• Clean design with a concise headline
• Email is easy to navigate
• Provides call-to-action (CTA) links to guide customers

2. Promotional Offers

Promotional emails are exactly what the name says to be — an email to promote your brand. The focus of the email is the sale itself, and use content to motivate customers to make a purchase or sign up for a service.

There’s a variety of different promotional content you can use to make this email standout, including:

• Limited time offers
• Sale markdowns
• New arrivals and product launches
• Early sale access
• Seasonal/Holiday specials

While the content of this email can vary dramatically, the focus of conversion is still the same. There should be a clear, concise CTA that prompts customers to take advantage of the promotion. Be sure to make this offer worthwhile, and refrain from sending too many promotional emails as this will diminish the excitement of receiving a special offer.

Clothing brand Loavies uses buzzwords like “early access” and “skip the line” to get subscribers excited, as well as offering a head start to their Black Friday sale. The email provides clear instructions for signing up, details on the discount, and a button to sign up directly.

What works:

• Gives subscribers an exclusive offer
• Uses FOMO (Fear of Missing Out)
• Provides easy-to-use CTA button for signing up

3. New Product Announcements

Announcing new products is a great way to keep customers engaged throughout the year, beyond their initial transactions or specific sale offers.

Product announcement emails can serve several purposes. These emails can be focused on promoting new arrivals with a CTA that encourages customers to make a purchase. It can also be used to re-engage customers, such as introducing new features that appeal to those on the verge of churning. Or it can simply be a way to keep your brand top-of-mind by announcing what’s new and generating excitement among customers.

To announce their new updated product, Corvid by Wix sent an announcement email that takes customers through all their recent updates. The email includes images of the updates, lists of new functionalities, and CTA buttons for customers to try it out themselves.

What works:

• High-quality images of the updated product
• Multiple CTA buttons that guide users
• Shows value proposition of the update

4. Informational: Tips, Tutorials, Guides

It’s important to keep in mind that not every interaction you have with customers needs to be centered around driving sales. Constantly pushing promotions will disengage audiences, and eventually lead to your emails in a spam folder.

This is when informational emails are useful. Informational emails focus on building a relationship with customers and providing a great customer experience. This is becoming increasingly important as 73% of consumers say a good experience is key in influencing their brand loyalties.

Types of informational content can include:

• Insider tips
• Tutorials and How-to Guides
• Blogs and Articles
• Webinars
• Live events
• Quizzes, Polls, Surveys
• Inspirational Quotes
• Industry news
• Video series

Of course, your brand and products can be woven into this email content. However, the objective is to provide customers with something of value. The content should be high-quality and relevant. And most importantly, it should be interesting.

Awario gives unique insights with their weekly emails. The emails feature relevant content, while subtlety showcasing their brand’s social listening software capabilities. The content is refreshing as it uses a different approach to regular news digests and provides audiences with an interesting take on trending social media topics.

What works:

• Focuses on providing value, not promotions
• Uses captivating copy that leads to the article
• Simple and straightforward content

5. Upsell

Keep your existing customers coming back to your store with upsell emails.

Upsell emails are for your existing customers who might be interested in other offers from your brand. This email comes after the initial transaction, and there has been some time to build a relationship with the customer.

The content of these emails should not be over-promotional, as they are already your customers. You don’t want to come off as too pushy. Instead, think of upsell content as an opportunity to enhance their existing purchases.

This content can include:

• Bundle offers (i.e. “Complete your order with….”)
• Content around related products (i.e. “Frequently Bought Together” items)
• Personalized buying guides (i.e. “We think you’ll love these new arrivals”)
• Access to premium SaaS features (i.e. “Unlock new features”)
• Extend free trial periods (i.e. “Want your free trial extended?”)

WordPress offered its existing customers a flash sale with a discount for upgraded plans. The email includes an exclusive discount, value proposition, and limited-time offer so customers were encouraged to act fast.

What works:

• Clearly states discount in the headline
• Highlights the new features available
• Creates sense of urgency to get the deal before it’s gone

6. Referral

Invite customers to become brand ambassadors with an affiliate or referral marketing program.

Referral emails are a win-win for you and your customers. You receive quality referrals and word-of-mouth promotions, and your customers are rewarded for their referral efforts with a commission or discount. This is also a great way to build brand loyalty.

Rype does this by giving their existing customers $70 for every referral they send. The email is straightforward in communicating what they can earn and how they can get started, easily turning their customers into brand ambassadors.

What works:

• Offer is directly stated in the headline
• No frills, hassle-free process
• CTA is bold and stands out in the email

7. Customer Reviews

This is another win-win email. Asking customers for feedback is a great way to make customers feel valued and connected to your brand. This feedback is also very important to your overall growth efforts. Not only does it provide useful insights, it’s an essential marketing tool as 91% of people read online reviews before making a purchase.

Send review emails after key engagements with customers, such as following a completed transaction or positive customer service interaction. Aim to make the process simple and hassle-free so customers can review on the spot.

Amazon sends a review email shortly after an order has been delivered. The timing of this email is when the order is still fresh in the customers mind, but also gives them enough time to form an opinion so the feedback is more genuine.

What works:

• Easy to provide reviews and feedback
• Uses the headline to share customer appreciation
• Provides CTA to re-engage customers

8. Milestones Emails

Milestones are a great excuse to send an email and reconnect with your customers. And the best part, there’s plenty of different milestones you can acknowledge.

One option is celebrating a milestone for your company, such as the number of years in business or reaching a certain number of customers/subscribers. These emails are most effective when they include a message that is heartfelt and genuine, such as a letter written from the CEO or a video featuring employees.

Another option is a milestone for the customer, such as how many years they’ve been a customer/subscriber. It could also focus on their individual activity, such as how much they’ve ordered from your store or how much time they have used your app. These emails should be hyper-personalized email, and tailored to specifically to individual customers.

Duolingo sends their subscribers Weekly Reports, breaking down their progress in learning a new language. It includes stats like how many new words were learned and how many lessons were completed. The gamification of their email makes it engaging, and motivates the receiver to continue using their app in order to improve their reports.

What works:

• Fun and entertaining graphics
• Gamification to increase engagement
• Multiple CTAs to prompt subscribers

9. Customer Appreciation

Email is a great way to show customer appreciation. Customer appreciation emails can increase brand loyalty, repeat business, customer reviews and referrals, and is yet another opportunity to re-engage the customer.

These emails are a nice surprise, and since there isn’t a prompt like a sale or promotion, it comes across more genuine to the customer.

However, just because there isn’t a specific prompt, this doesn’t mean you shouldn’t be intentional with the messaging and purpose of the email. Sending an email without this is likely to lead to more unsubscribers than engaged customers.

Instead, make these emails personalized to your customers. Show appreciation, and mention what it means to your brand. Also consider offering something special as your way to say thanks for their business.

Crate & Barrel sends an email and discount code as a way to simply say thanks to customers. The email doesn’t feature any certain promotions or products. It is straightforward and transparent in its intentions.

What works:

• Highlights an attractive offer
• Focuses on customer appreciation
• Use key buzzwords like “our gift” and “special discount”

Start Sending Emails Today

Email is a great way to connect with your customers throughout their buying journey, and is also a great way to re-engage those customers who may have lost touch with your brand.

Whether it be through useful content or a tempting discount, focus on making each email worthwhile to the customer. Personalization, timing, and messaging are key to successful email campaigns.

---

Photo by Artem Bryzgalov on Unsplash

Hasura is one of my favorite ways to create a managed GraphQL API for my applications. I find it easy and straightforward as well as suitable for a wide range of use cases. However, since working with Hasura, I’ve seen the same question come up again and again: how should we make an array? Given the fact that array and map are not provided in the type dropdown for rows, what’s the best way to accomplish this?

Truthfully, the concept of an array can be captured by Hasura a few different ways, and what follows is a breakdown of methods to approach this. My personal preference is the last option we’re going to cover, JSONB, but we’ll walk through other options in case you’d like to take another path, as every option has slightly different benefits.

Method 1: Literal arrays, manually

Hasura doesn’t offer “array” as a type, but we can create an array of strings by selecting “Text” and adding square brackets at the end, like this:

What we get is text[], and we’ll be prompted to create arrays in one of two ways:

[“one”, “two”] 
// or 
{“one”, “two”}

Method 2: Create a relationship

We can also create a relationship with another table that’s a series of text elements. To do so, create a row that has the type of text.

We’ll also create a new table via the “Add Table” button in the sidebar, and we’ll create a very simple row, with a unique key for the type we need — text, integer, or whatever is necessary for the data.

Now, click the “Relationships” tab. In the table, select the “Array Relationship” option, give it a name, and reference the original table that was created.

The id of the first table should have a relationship with the id of the second table we just created.

Once it’s saved, you should see the array relationship reflected in the table in the same relationships tab, with an arrow denoting the direction of the relationship.

users.gameId → favoriteGames.id

Now we can look up the array in the “GraphiQL” tab:

Method 3: JSONB

What follows is one of my favorite ways to create an array in Hasura. I like it because it can be really performant. We can use the “JSONB” type and create an array by selecting JSONB from the dropdown. Then we will be prompted in a similar fashion as the text[] option:

When it’s filled out, it will look like this:

From there, not only can we add the arrays to your query as above, but we can also search by tag through multiple indexes, and their GraphiQL tab makes it easy to explore. Check out when I filter the tags by what contains “animation”:

query MyQuery {
  codesamples(where: {tags: {_contains: "animation"}}) {
    userId
    name
    id
  }
}

However, a lookup like this is not necessarily performant out of the box, especially when there are large amounts of data. Luckily, we can define what fields we would like to index. From the “Data” tab at the top, select the “SQL” group in the side panel, and in that area we can define what fields we would like to index in order to maintain a performant lookup. In this example, we’ll create an index on the “tags” field:

create index codesample_gin on codesamples using gin(tags)

This will run the query, and index this lookup, making it more performant in the future.

Wrapping up

Hasura has a wonderful developer experience to set up quick and easy-to-use GraphQL APIs. For those who are interested in setting up arrays with Hasura, I hope this article is helpful.

Thanks to Adron Hall from Hasura who proofed this post.

---

The post Creating Arrays in Hasura appeared first on CSS-Tricks.

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

I come to bury Flash, not to praise it, writes Matt May in this excellent thread about the end of Adobe Flash. Not so long ago, web designers used Flash to create striking visuals and animations and games. But shortly after that, it began to replace HTML and CSS which caused a ton of accessibility problems. Most Flash websites weren’t navigable by keyboard and screen readers couldn’t parse them at all.

Matt describes this core problem at the very heart of Flash: the fact that it excluded so many people from the web back then.

The biggest joke of the 2000s around Flash was that it was a tool for making restaurant menus. Flash devs made apps that looked the way restaurateurs wanted them, and sold them in bulk. But how they did it was by faking buttons, scroll bars, etc. It was a picture of an interface.

— Matt May (@mattmay) December 31, 2020

“A picture of an interface” is a good way to think about it. But, overall, I reckon this thread is important because it reinforces the idea that we ought to think about accessibility every single day, regardless of whether we’re working on a large web app, a tiny marketing website, or contributing to an enormous JavaScript framework:

Finally: if you make the platform, you have an immense responsibility to the people who build on it, and the people who use it. In a very real way, you set the upper limit on how many people get to participate equitably within your ecosystem. NEVER, EVER forget this fact.

— Matt May (@mattmay) December 31, 2020

Every day we write code, we’re deciding who is welcome and who is not.

Direct Link to Article — Permalink

---

The post The End of Adobe Flash appeared first on CSS-Tricks.

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

Spencer Miskoviak on the Wealthfront blog:

By creating custom DevTools specific to an app, they can operate at an even higher abstraction to handle things like user interactions, or debugging tracking events. While this requires building and maintaining the custom DevTools, it also means it can be tailored to the needs of the app and engineers to streamline development.

I think it’s super cool and smart to build custom tools for your team of developers. Even if custom tools are just for yourself they can be a productivity boon. But by building custom tools for your whole team, and opening the door to their ideas, that’s extra smart and compounds the value.

Spender showcased a variety of different tools they have, all under the umbrellas of a UI popup widget thingy:

• Shows current branch and CI status
• Fills out forms, performs user actions, switches between users
• Highlights components

Clever stuff.

We don’t have a fancy UI widget like that at CodePen, but do have some productivity-helping fuctionality sprinkled into the app. For example, many forms have a prefill button that only shows up for devs:

And we have a custom tool for our support inbox that gives context to the users and content that the support ticket references:

Not to mention a whole protected admin area on the site itself to perform a whole slew of admin and developer focused tasks:

---

I think the “component highlighter” that Spencer talked about is particularly neat:

React DevTools can be helpful in seeing what parts of the current page are which components, but that’s not on-page like this. I think it would be rad to have a little ? next to each title that would open that file in VS Code.

---

Speaking of building your own tools, Shawn Wang wrote “You’re Allowed To Make Your Own Tools” recently:

Even the greatest software has parts that aren’t so great for you. But the difference between you and everyone else is that you can code.

Shawn talks about things like…

• Building your own custom stylesheets
• Building a UI query generator
• Building your own CLIs (I’m reminded of Mina Markham’s dotfiles)
• Building your own proxies

Shawn wrote his own dang proxy for Google Search Results to optimize them and present them how he likes:

Once in a while, I’m in the mood to focus on tooling, which leads me to do stuff like when I decided to “Run Gulp as You Open a VS Code Project using VS Code Tasks” which I had to learn all about and struggle through weird problems. I’d think a great DevOps person at a company would be all over stuff like this—constantly thinking of developer experience for their own people.

I even scripted the opening of a text-based multi-player video game I play not long ago to save myself some time.

---

And speaking of building your own tools generally, I think of Dick Proenneke’s in Alone in the Wilderness documentary. In this intro clip, you can hear Dick talk about quite literally building tools, which was useful for him as he didn’t back to hand-carry them deep into the Alaskan wilderness.

?

---

The post Make Your Own Tools appeared first on CSS-Tricks.

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

Don’t drop the ball on these website design trends for the new year. All of the trends featured here this month are visual in nature – not as many user interface elements as previous months, but all just as stunning and usable.

Here’s what’s trending in design this month.

1. 3D Scenes on White (Light)

Three-dimensional scenes are not just a trend this month but are likely to be one of the biggest website design trends that you see all year.

They offer a great way to show off product imagery, design something with illustrations or animation for visual impact, and provide usability and understandability cues for users.

It’s a versatile technique that can work with real or created images and are also “COVID-friendly,” something designers have had to think a lot about in the past few months. (Appropriate imagery in design is a real concern, as is trying to design projects without the ability to produce traditional photoshoots.)

What’s neat about all of these projects – and plenty of others – is that they root the design in white or light backgrounds. The light effect creates an easier visual mood that’s clean and emphasizes the imagery.

This website design trend solves a lot of those problems and looks good doing it.

Google’s Cloud design uses 3D illustrated animation on a white background with plenty of depth elements. The primary color palette of illustrated objects pulls it all together and guides the eye through each of the callout labels.

The red words on the screen Crystal Pure fit perfectly with the white-on-white 3D imagery of this design. Red accents pull you into different places on the screen, and it all has a clean feel.

Hofmann & Hofmann uses the same concept with a slightly different approach. The background is still light with a realistic feel and 3D objects, but it is a lot less stark and white. The feel is a little warmer and more inviting than a flat white aesthetic.

2. So Many Stacked Capitals

If you don’t have great artwork or imagery, make your own with typography.

This trend seems like it might be yelling at you just a little, but it still works for the most part — well, as long as you don’t land on too many of these website designs in a row!

What’s interesting about this trend is that many of the designs feature all caps type and serifs. These styles have been making a bit of a comeback, but this use is interesting for many reasons.

The hardest part when using all caps is maintaining readability. That’s why you see some variances in regular, italics, and bold weights, as well as the use of multiple typefaces. The goal is to create a good reading flow with a stunning visual presence.

This trend works best when you have “easy” words on the screen to facilitate scanning. Too many long or complicated letter combinations can get challenging quickly.

Make sure to look for the Easter eggs in each of these projects:

Emotion Agency has tiny “waving” illustrations next to each word (which doubles as the navigation) when you hover over them.

Mill3 Studio has a few animations, from the text flying in and out on load and scroll to subtle movements in the emojis.

Bizarro has this fun little cat video with a tiny warning not to hover over it, but you definitely should.

3. Empty Places

The final trend in this roundup is a stark reminder of current times. Each of the website design features empty places or locations.

This style of imagery would have been avoided pre-pandemic because tourism locations would want visitors to feel like a part of a bustling environment. Not today. If you travel, chances are you may feel safer or want to be in a more secluded environment.

All of the images and videos from these locations show just that.

Designers are doing this with new stark imagery that stands alone for the design or inserting a few empty place frames into video clips or among images that show more populated times. Even scenes that contain people show very few people and focus on more solitary activities.

Paragon Oak does this by showing a beautifully lit location at night. Note that using a nighttime photo eliminates questions about where the people are or what they are doing. (This is a clever option when showing imagery of an empty place.)

Vienne to Paris shows boats on the water with a beautiful background. While you assume there are people on the water vessels; you don’t see them and get the feeling that everyone is separated in their own “pod,” a pandemic-friendly option for travel.

The Maryculter House shows various images without people – the resort’s location on beautiful grounds; empty, but immaculate rooms, and a few images of a person alone on the grounds. Again, the empty nature of the place feels more appropriately welcome for the time we live in.

Conclusion

One of the things that we’ve seen with design trends in the past year is pandemic-related. The composition of images to the way elements are arranged on the screen influences every aspect of our lives.

While the empty place image and video trend is big now, it may fade post-pandemic. Although, it could still be relevant for quite some time. It will be interesting to see what happens as the year progresses with this trend – will it hold on or fade away?

These trends might continue to hold well into 2021.

Source

The year 2020 changed so many things for so many people. One of the biggest changes was the need for people to work from home in unprecedented numbers.

Without face-to-face communication in the real world, people have begun to rely much more on their tools. Zoom usage has skyrocketed, and productivity tools have become more important than ever before.

But to respond to the demands of the modern remote team, productivity tools need to be highly flexible. Spreadsheets that act like databases take flexibility to a new level. Here’s a list of tools that use them.

1. JotForm Tables

JotForm Tables is doing something completely new. We supercharged our suite of productivity tools with this spreadsheet-database hybrid tool. By giving you dynamic access to your data, we’re empowering you to make JotForm your own.

Our tables will be familiar to you if you’ve used Airtable. Several views, including table, cards, calendar, and uploads, are available. You can use a form to populate a table, enter information manually, or upload a CSV or Excel file to create a table. You can also connect a table to another form or table. And you can use formulas to process your data and even create professional-looking reports from your data with the click of a button.

2. Airtable

Airtable is the first to call their product a spreadsheet-database hybrid.

Airtable begins with a dynamic table that lets you create a spreadsheet with column types like those you’d find in a database. But then it gives you the ability to visualize your data in calendar, gallery, Kanban board, and other views.

Once your data is in place, you can take advantage of a huge selection of apps that work off of your data. If that’s not enough, Airtable offers a plethora of third-party apps, and you can even create your own.

3. Microsoft Lists

Microsoft Lists will be especially helpful for businesses that use MS Office 365 Professional. Microsoft has always offered spreadsheets and databases through Excel and Access, of course, but spreadsheets have limitations, and Access can be difficult to learn.

A spreadsheet-database tool like Microsoft Lists gives you the power of a database with Excel’s ease of use. Plus, you get all the other benefits that come with this type of tool.

4. Google Tables

Google Tables is experimental software that could someday take Google’s services (like Drive, Docs, and Gmail) to the next level. For now, though, it still feels like a very light Airtable.

Google Tables offers inter-table connections and automation bots. You can connect bots to webhooks, which creates a lot of integration options, but very few integrations are natively available at present.

As cool as it is that Google is releasing this tool, it’s a good idea to adopt it with caution — Google has a nasty habit of killing off some of its most innovative tools.

5. Notion

Notion is a versatile note-taking and knowledge management application that makes database-spreadsheets as useful for individuals as they are for teams. Notion offers a lot of ways to get organized, and dynamic tables are one of the best.

Notion’s tables tie in seamlessly with its dynamic data by adding them to pages. In fact, you can have an unlimited number of dynamic tables in each page alongside text, images, and embedded widgets.

6. Coda

Coda is another document-oriented tool that’s similar to Notion in many ways. Coda’s focus is on documents rather than notes, though. It’s a subtle difference, but it’s central to how people use Coda.

Coda also sets itself apart from Notion by offering a lot of integrations and more options for formatting its dynamic tables, but it still lacks Notion’s clean styling and elegance.

7. Smartsheet

Smartsheet will likely feel more natural to spreadsheet fans. It lets you insert columns and rows in a way that’s very similar to standard spreadsheets. And the advanced capabilities still look and feel like spreadsheets.

In fact, many of the things teams do with Smartsheet are similar to what you can do with basic spreadsheets. There are plenty of examples of people pushing the capabilities of spreadsheets to the breaking point, and Smartsheet seems to have recognized that and created a better tool for those people.

8. ClickUp

ClickUp is a kitchen sink tool that seems to want to take on the whole world. Some tools — like Notion — are flexible and give you a lot of ways to get organized. ClickUp is more direct. It gives you the ability to create documents and to-do lists, track goals, and manage time, and it presents everything with dashboards to manage it all. ClickUp also offers some really unique views — like mind maps.

ClickUp’s primary focus seems to be on lists and task lists, though. In other words, it’s the to-do list of the spreadsheet-database world. And it’s the task lists that have different views, rather than the dynamic tables.

An unprecedented year calls for unprecedentedly flexible tools. You’ll no doubt be able to find one among these eight options.

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

10 Free Calendar 2021 Vectors

Free HTML/CSS Landing Page Templates Without JavaScript

Botsman – Free Platform to Develop, Test and Monitor Telegram Bots

Typography Principles

Top 10 Web Development Trends to Look Out for in 2021

Parametric Color Mixer

Add to Calendar Generator – Generate ‘Add to Calendar’ Buttons for your Website

What Designers Need to Know About Copyright Infringement

Lose the Very – “Very Good English” is not Very Good English. Lose the Very.

Linkish – All-in-one Bookmark Manager

Life of a Designer Through Funny Memes

APIs all the Way Down

Got Milk Font

14 Bootstrap Profiles

Big Review of Major UI Design Trends for Web and Mobile in 2020

How to Use Figma’s Inspect Panel

Reducing Motion in Animations

Dopely Colors – Free Color Palette Generator

How to Upload an HTML File to WordPress

Using Math in Photoshop

How to Set up your WFH Space for Creative Success in 2021

StackWhats – Add the WhatsApp Live Chat to your Website

How to Export a WordPress Site (Beginner’s Guide)

Podpage – Build a Podcast Website in Less than 5 Minutes

How to Paginate Data with PHP

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source