Archive

Archive for July, 2021

The Fourteenth Fourth

July 4th, 2021 No comments

It’s CSS-Tricks birthday! Somehow that keeps coming around every year. It’s that time where I reflect upon that past year. It’s like the annual vibe check.

I’m writing this just days after my current home state of Oregon has lifted most of the COVID restrictions. Certainly a very weird feeling. We’re just hitting the state-wide 70% vaccinated level which is the big milestone covered in the news. I thought our little local organic-heavy progressive grocery store would be the last place to go mask-less, but even in there, the vast majority of people are raw-facin’ it, employees included. So it’s not just America’s birthday this year, but a real sign of changing times. Controversy in tow, as there is plenty of evidence the danger is far from over. Definitely gonna hit up some fireworks though. The kid loves ’em.

Well-Oiled Machine

I’d say that’s ^ the main vibe around here from my perspective. The site is in good shape all around. The tech behind it is stable and mostly satisfying. The editorial flow is flowing. The content idea bucket overfloweth. The newsletter goes out on time. The advertising and sponsorship demand is sound. Ain’t any squeaky wheels on this train.

And did you know we have zero meetings? Just light Slack chatter, that’s it. This is a part-time gig for everyone, and we aren’t doing any life-saving work here, so no need to take up anyone’s time with meetings.

Technologically, we’re leaning more and more into the WordPress block editor all the time and it feels like that is a good thing to do here in WordPress land. Every time we have a chance to get more into any current WordPress tech and take advantage of things WordPress does well, it tends to work out.

This is all great because as far as hours-in-the-day go, most of my time is on and needs to be on CodePen. An incredible amount of work lays ahead there as we evolve it.

Things to Get Done

That’s not to say there isn’t work to be done. I’ve got some WordPress scrubbing to do, for one thing. There are a few too many places functionality code is being stored on the site. I’ve completed an audit, but now I need to do the coding work to get it clean again. Things change over the years, WordPress evolves, needs evolve, performance and accessibility considerations evolve, my own taste evolves. Code from 8 years ago needs to evolve too.

One thing I’d really love to get done is to move all the content on the site that really should have been a Custom Post Type to actually be Custom Post Types. Namely screencasts and almanac entries. Right now they are Pages instead, which was fine at the time as it lends itself to a hierarchical structure nicely. But the only reason they aren’t Custom Post Types is because those didn’t exist when I started them. In today’s WordPress, they really should be, and I think it would open doors to managing them better. I’m not sure I have the chops to pull off a conversion like that so I might have to hire out for it.

I’d also like to evolve our eCommerce a bit. I think it’s been going great as we dipped our toes into selling things like posters and MVP membership, and now it’s time to make all that stuff better and more valuable since it’s a proven win. For example, I’m working on making sure the book is downloadable in proper eBook formats, that’ll be a value-add for members. I’ve started thinking about what more we can do with the newsletter as well since those are so hot these days, and I’m a fan.

Social Media Cards

While social media isn’t a major focus of ours, we do tend to make sure Twitter is in good shape, as we have that sweet handle @css. I’m pretty hot on the idea that sites (content sites especially), should have nice social media images. Fortunately, thanks to Social Image Generator and some custom code, ours are in good shape. I still smile looking at them as they are so damn distinct now. WP Tavern did a nice writeup on the plugin.

There are five different possibilities for social cards now we can use.

Sponsors

I’m incredibly blessed that we have the same four major sponsors as we’ve had the last few years:

  • Automattic: WordPress is at the heart of this whole site. I’m so pleased to get to have Automattic as a sponsor, who not only create all kinds of important software for WordPress that we use here, like Jetpack and WooCommerce, but are big contributors to WordPress itself. I like that the site can be a living testament to what you can do with WordPress.
  • Frontend Masters: There is no A to Z learning path here on CSS-Tricks. If you want true curriculum to level up your skills, that’s what Frontend Masters is for. I couldn’t recommend any learning platform more, which is why I’m so happy to have them as our official learning partner and enthusiastically point people there.
  • Netlify: The Jamstack is a good movement for the web and literally nobody does it better than Netlify. They have pioneered so many good ideas it’s incredible. It’s easy to look at the industry and see even huge companies scramble to do what they’ve been doing for years.
  • Flywheel: I’m a believer in happy path web hosting. Use hosts that specialize in what you’re doing. This site is WordPress and I don’t think there is a better hosting option for WordPress than Flywheel. And that’s without consider that they also make Local, of which there is no better local development story for WordPress.

Design

We’re about a year and a half into v18, and it has certainly evolved quite a bit since its launch. While it’s feeling solid now, I’ve started to get the redesign itch and have been saving design inspiration for v19. I imagine it’ll happen over the slower holiday season as it tends to. I have a feeling it’ll be a stripping-down sort of design heading back to less colors and more typography-driven approach that can support themes in a way I never have. But we’ll see!

Analytics

It’s largely the same story as the last 3-4 years. Always hovering just a smidge north of 8m page views a month. A perfectly healthy number for such a niche site. But also a constant reminder how difficult the content game is. You’d think a constant stream of content creation would grow traffic up and up over time, particularly since our technical content usually has a decent shelf-life. But at some point, you have to keep creating content and keep working on a site just to maintain what you have. Meaning older content slowly drives less traffic and new content needs to step up and fill the gap. At least that’s one interpretation of what’s going on—I’m sure the complete story is much more intricate (SEO, competition, saturation, content blockers affecting numbers, etc).

The name?

I ain’t gonna up and change anything, but the name “CSS-Tricks” has been so hokey for so long. Every time I see some other brand pull of a daring name change, I’m a little jealous. Would it be worth it for CSS-Tricks? The potential benfits being: a new name could usher in fresh interest in the site, be a catalyst for other change, and be less of a jarring mismatch between what we actually publish and what people might expect us to publish based on the name. I’d have to do a lot more thinking and research to be able to pull it off. If the domain changes, even with perfect redirects, are there still serious SEO implications? How could I minimize the confusion? Is there a chance in hell a change has more upsides than downsides?


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

Categories: Designing, Others Tags:

Good Meetings

July 2nd, 2021 No comments

Like it or not, meetings are essential to a good working environment and communication. Therefore, it’s crucial that we work on making them as productive as possible. Today we’ll explore myriad ways to keep meetings coordinated, well documented, and talk about how to recognize and steer away from anti-patterns.

I’m timid to write this because I have not always hosted good meetings. I have, however, hosted thousands of them, so I’ve learned both from some mistakes and successes. In all likelihood, if you do any kind of management or lead work for a while, you’ll also see your own spectrum of meetings: meetings with different types of agendas and purposes, meetings with varying levels of awkwardness, meetings that didn’t have a formal outcome. We’ll dive into all of these in this article, as well as some tips for each.

The truth is, a meeting by its nature can almost never be perfect because it is by definition a group of people. That group of people will consist of different people: with different tastes, different opinions, different priorities, and different values. There’s a high chance that not everyone will agree on what a great meeting is. So half of the journey is aligning on that.

The Good, The Bad

One thing’s for sure: we can agree on what a bad meeting is. So let’s start by using that as a ballast:

  • There’s no clear purpose or direction
  • It feels chaotic
  • The wrong people are there
  • People are generally disrespectful of one another
  • Everyone feels it’s a waste of time

From those assertions, we can then derive what a good meeting is:

  • The purpose of the meeting is clear
  • There’s an agenda (we’ll dive in to the complexity of this in a moment)
  • There are the right people in the room. Not too many where communication is overly complicated, not too few where the people you need to move forward aren’t there.
  • There’s some order. People aren’t dropping in and out, talking over each other, or being generally inconsiderate
  • There’s a clear decision, outcome, and next steps at the end

Purpose of the Meeting and Direction

The first point and the last are connected: to have a good meeting, there is a core. You’ve all come for a unique purpose, and the end of the meeting should encapsulate what you’ve learned about that purpose and what the next steps are. Thus, the beginning and end of the meeting might sound a little similar:

We’re all here today to discuss how we’re going to support the next version of framework X. I have some new data to show you that frames the direction, Hassan and Jenna are here to talk about some of the details of the implementation, and Angela, we’d love to coordinate with you on a rollout process because it affects your team.

And at the end:

OK, so we decided we’re going in Y direction. Angela, your team seems comfortable doing Z, is that correct? And the rollout timeline we’ve agreed on is 5 weeks. The next steps are to explore the impacts of A, B, and C and reconvene in a week on our findings and process.

This is just an example—it’s not important to model this precisely. But you should be aligning at the beginning and end of the meeting to make sure that nothing major is missing and everyone is on the same page. If you haven’t come to a decision by the end of the meeting, then your next steps may be either to figure out who will make the decision and inform everyone or roll over to a new meeting.

Ideally these sentences are encapsulating information everyone needs:

  • The shared purpose
  • What you’re doing about getting to that outcome
  • Who is owning what
  • How
  • When, what are the timelines

If there are people there who do not need to know this information, they probably shouldn’t have been at the meeting in the first place.

The Agenda

Beyond deciding that a meeting should have an agenda, there are so many ways and means an agenda can be used. Strangely enough, an agenda can also be a way to not have a good meeting, so let’s explore that, too.

An agenda should ideally always state the purpose of the meeting. I personally love to then include some bullets as talking points, as well as space to take notes right in the document during the meeting.

Sometimes people use an agenda to write thoughts down before the meeting, and I would strongly suggest you steer clear of this—there’s nothing wrong with a person keeping notes for themselves for the meeting but if you come to a meeting where an agenda is locked top to bottom with material, it can sometimes shut down the collaborative aspect of the meeting—which means it shouldn’t be a meeting at all, it should just be a shared doc, to be consumed async. Part of the purpose of the meeting is the discussion itself. Again, louder:

Part of the purpose of the meeting is the discussion itself.

Not all meetings are the same

There are also different kinds of meetings. Let’s go over what type of agenda you might use for each:

Brainstorming session: perhaps you don’t want a full agenda, just the purpose and a notes section, or even a Miro board or other whiteboarding tool to use for capturing people’s thoughts, with small areas stubbed out.

Weekly discussion or daily standup: I typically have folks add whatever they like to ours, prefacing their contribution with their name and a small category, for instance, RD for rapid decision, D for discussion, and P for process. Here’s an example:

- [Sarah, RD] should we block off 4 hours to triage our iceboxed issues?

Our team uses a kanban board during the standup and people take turns talking about what they’re doing for that time period. It’s nice how it helps solidify the tasks and priorities for the week, and allows for some course correction if there’s accidental misalignment before the work is done.

We also talk about what was done or shipped in the previous week so we can celebrate a little. Especially on tasks we know took the person a long time or took a lot of effort.

We found through trial and error that twice a week check-ins suited us: once on Monday to kick the week off, and again on Wednesday to keep us aligned and the momentum going.

Cross-Functional meetings: This is one where a more formal agenda with some preparation can be really helpful, so that all parties have enough information about the purpose and what’s being discussed. If you have a lot of information, though, I would suggest creating a one-sheeter and sharing that ahead of time instead of adding everything to an agenda. Sometimes if I know everyone is too busy to read everything async, I will give the first 5 minutes to the group to read through the one-sheeter on the call so we’re all on the same page. People usually appreciate this. YMMV.

All this said, agendas are very useful, but I’ve seen strange culture arise from making strict rules around them. The point of the agenda and meeting is to collaborate on something. That point is nullified if folks are putting process ahead of that impetus.

The best cultures I’ve worked at use both meetings and agendas as tools for working together effectively- tools that everyone equally feels responsible for making useful.

All Kinds of Awkward

OK, you led a meeting! You gave people purpose, you set direction and timelines. But why was it so awkward?!

Not all forms of awkward are bad, really. There are different kinds of awkward, and some are quite natural, some are more harmful. Let’s analyze this for a moment, starting from most innocuous to something more insidious.

You all didn’t know each other well

The team I got to work with at Netlify was some of the silliest, most collaborative, and trustworthy groups I’ve ever had the pleasure of working with. We actively cultivated this culture and it was great fun. Every meeting started with goofing off and chatter. Then, when we got to business.

The meeting would flow effortlessly because we were all comfortable together. One time a friend in the People department asked “what do you do to break the ice with your team”, and I jokingly responded “ice? Our team? No… we don’t need that… maybe we should be frozen?”

Not all conversations are going to be like this. We knew each other fairly well and actively worked to have vulnerability together. If your meetings with other groups you don’t know well have awkward moments, that’s actually pretty natural, and nothing to be too concerned with. You can try to make conversation and that can help, but trying to force it too much can also feel a bit stilted, so just ease up on the guilt for this one. There’s nothing wrong with you, I promise.

There were too many people

During the pandemic, my husband and I would sometimes try to replace in-person dinner parties with zoom versions of the same. What we learned was they didn’t quite work at scale. When you have an in-person party with 12 or more people, everyone doesn’t really stay in one huddle together, they break off to smaller conversations. When we started hosting the zoom parties with smaller groups, the calls became more fluid, relaxed and comfortable.

There’s a certain scale at which conversation begins to feel performative because there are so many eyes on a person when they’re speaking. Meetings are very much the same. Try not to invite too many people to a meeting. If you are worried folks might not feel included unless you invite them, you can either mark them as optional or let them know you’ll be sure to tell them the outcome.

If you’re inviting too many people because there’s a company culture that everyone should be involved in every decision, that might be a sign of a wider issue that needs some solving. Companies at a certain scale start to have issues functioning if there is no clear understanding of ownership. If you’re inviting everyone out of fear of hurt feelings often, it’s likely not a problem with your meetings, and more a sign that you need some clarity. See the DRI section at the end of this chapter for more information on how to mitigate this.

There’s something people aren’t saying

This kind of awkward is probably the most harmful. If the meeting is awkward because people don’t feel comfortable telling the truth, or there’s an elephant in the room, or there’s a smell that needs to be dealt with. Elephant smells? Ok, moving on.

We should watch out for this and try to do something about it. Personally, I’m a “walk towards the fire to put it out” kind of person, and will actually just acknowledge that it’s awkward because it doesn’t feel like we’re being transparent with one another. I’ll state what I know from my perspective and then ask if other folks are feeling the same. 

If you do this, you’ll usually have to wait a beat or two. People will likely be a bit shocked that you came right out and said it. It will take them a couple of seconds to adjust and consider what will happen if they tell the truth, too. It’s crucial that you not speak to fill the silence in these moments. It will feel very uncomfortable, but I promise, you have to let the silence hang for a bit before someone speaks up. Typically from there, people will all start speaking, and you can actually dig into the problems.

Conflicts

There’s an entire chapter devoted to conflicts because the topic is big and nuanced enough to warrant its own time and space, but let’s apply some of the principles here, because there is an intersection of good meetings and dealing with conflicts directly.

The most important piece here is that conflicts are not something to be avoided. It’s not bad that people feel passionate about their work, it’s great. Not all conflicts are negative- the point of the meeting may be to bring to light where folks aren’t aligned. There probably is some base premise or problem they are all trying to solve, but they see the solution differently. It can help to find the alignment there so the ideas can be fleshed out without being attached to a particular person’s identity.

 The identity thing can be a pitfall, because if you have two people discussing their idea instead of an idea, it can feel to them like someone is rejecting them rather than a concept

We want to try to guide towards an approach where it doesn’t feel like anyone is attacking one another, and also manage actively against people being disrespectful to one another. It’s the job of a manager to disambiguate healthy conflict from attack so that respectful discourse is encouraged. If folks are putting out ad hominem attacks, it’s on you to reel that in and move the conversation towards the work instead. Otherwise, it really is hard for the conversation to stay productive.

Typically I’d say it’s good to hear people out, and then reign things back in by discussing what you think you’re hearing and tying it back to a shared purpose. Then we find where we have common ground. Here’s an example:

“What I’m hearing is that Rashida feels that team X is migrating a system that affects her team while they are trying to release a big feature. Is that correct? And that Jerome feels that it’s crucial that team X be able to migrate the system soon for stability purposes. Is that correct?

“OK, well, it sounds like we have a shared goal of making sure the company can ship features with some stability. Perhaps we can talk through what timelines are immovable and which are not so that we can stay coordinated?

“I’m sure we all want to be able to ship said feature without any hiccups and also get the new system up and going”

Here, we stated what we thought we were hearing, which allows for the person to either feel heard or correct us if we’re mistaken and there’s a miscommunication. (Sometimes there is!)

Then we stated the shared goal from both parties, as well as risks and constraints that may play a part in some of the conflicts that need to be ironed out.

You’ll note in the last sentence, we try to tie a knot for a vision of stability that addresses both of their understandable needs.

A couple of things to note: I’m giving an example here and you absolutely don’t have to do it like me. The most important thing is that folks feel heard and that you all agree on what the conflict is. And that you remain open to that discussion, while finding the base premise of why you’re even talking about it.

It’s also way easier said than done. If you have a conversation that goes off the rails, I’d suggest spending a bit of time after you’re off the call to write down what you think happened.

I tend to give myself a section to just talk through the facts of what happened, and then another to talk through my feelings of what went poorly and what could have been better. It helps to check in with the facts separately because our human brains can sometimes try to protect us and see a particular version of an event. Hard to do, but checking in with just the facts helps ground that a bit.

There can be times where a strong conflict happens during a meeting and you’re at an impasse, and you need to give folks time to regroup. I’d suggest calling another meeting in a week as a follow up, and try to hear people out individually in the meantime. Sometimes people need a little distance from a matter, or they’re having a hard day, and that’s totally ok.

The DRI

The DRI stands for “Directly Responsible Individual” and is one of the most important pieces that we haven’t covered yet. A good meeting must have a DRI, and it is not necessarily the person who called the meeting. It might not be you. But you must designate who owns the project and ultimately makes decisions when there’s one to be made.

Why do you need a DRI? Well, as much as you do want to hear input from everyone, eventually you have to make a decision, and there are plenty of things in software development that don’t necessarily have one true answer.

Note that the phrasing is not PWMD (Person Who Makes Decisions) though that acronym looks pretty hardcore. Instead, we use Directly Responsible Individual because that’s also core to deciding who this person is. They are the person who is going to own the outcome.

That’s part of why not everyone can get equal say- if it’s your project and you are on the line for the outcome of whatever decisions are made, you can see how you would also need to own decision making. And likewise, if people who have no skin in the game decide things, they might not understand all the moving parts or invest as much in the gravity of the matter.

The appointment of the DRI not only unlocks the groups to make final decisions and move forward, but also places the responsibility on the party that will carry the weight.

There are several systems of ownership you can explore, such as DACI, which separates out Driver, Approver, Contributors, and Informed so that everyone knows their roles, and several others such as RACI and RAPID. Use whichever system makes the most sense for your organization.

I find it best to identify this person early on in a project and make sure it is restated at the start of a meeting (it can be included on the agenda as well), as it helps greatly if you find yourself at a crossroads. This person can unblock you and help the group move forward.

Moving Forward

It may at times feel like meetings are a drag on a software engineering process, but it doesn’t always have to feel this way. There’s something special about collaborating with a group of people who are respectful and working towards a common purpose. Good meetings can provide clarity and save people hours and days of work when they’re headed in the wrong direction. Having clear ownership, documentation, and only the right people in the room can keep many teams in lockstep, even when problems are complex.

Buy the Book

This is just a sample of the kind of content from my latest book coming out soon…


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

Categories: Designing, Others Tags:

7 Secrets to Build a Personalized WordPress Website from Home

July 2nd, 2021 No comments
7 Secrets to Build a Personalized WordPress Website from Home

Websites are what represent us and our businesses online. Having a website in 2021 is as crucial as having an office. Websites can cost you a fortune, especially if you try to hire bigger and more established companies or professionals to do so.

 As you keep adding features to your website, the cost of making it keeps soaring. But what if you were to be told that you could set up a website of your own, from the comfort of your home, at affordable prices and without any previous knowledge or experience of coding. Several platforms like WordPress offer you domains at rates as low as $35 per year. 

In this article, we shall be discussing the steps that can be followed to effectively set up a website of your own.

7 Secrets of Building a Personalized WordPress Website from Home

The Right Platform

There are various platforms available that help you create a website of your own. It is to be precise a content management system (CMS) that allows you to add edit and withdraw content from the website, with much knowledge of coding. The interface of the CMS is as easy to use as Facebook, Instagram, or any other application that you use daily. 

There are literally 100s of CMSs available across the web that will help you set up a meeting website and get going. However, there’s none as good as WordPress. It is one of the most used platforms and has the easiest interface for its users. As many as 35% of people across the web use WordPress as their CMS, while the remaining 65% are distributed to others.

Naming the website

Now we arrive at a stage that requires some creativity. Yes, we’re talking about making the website. Make sure the name is short, easy to remember, catchy, and easy to pronounce. Mispronounced brands often lose some customers to confusion. This will be known as the domain name for your website.

The domain name of the website should be brandable and should be easy to remember. It should be short so that people don’t need to sing sentences to address it. The spelling should be easy so there is less confusion and people do not end up opening the wrong page due to the wrong spelling. It should have keywords related to your niche so that its visibility in the search results improves. 

Hosting

Before we get started with hosting, we need to buy the domain name. Thousands of companies are available on the internet that shall help you in buying a domain name and hosting the website. Companies like Bluehost help you in accomplishing these tasks. 

SEOs

Once you’re done with the initial process, let your web host install WordPress for you. Most of these web hosts provide you a domain name without charging a single penny for it. All you need to do is visit the web host, select a hosting plan, and get your domain name registered.

Installing WordPress

Once you have bought the packages, you receive an email from the website, asking you to log in. Use the credentials and log in to the web host. Once done, you can now install WordPress to operate the CMS.

Office space

Another way to do it is to not do it yourself and ask the web host to do it for you. Just click on the create site options and the web host shall follow all your commands. Setting up a website on your own can be tiresome and you need a space in your house that brings you maximum productivity. Try remodeling your office space according to your needs.

Knowing your CMS

Once WordPress has been set up for you, get started by familiarizing yourself with it. It usually provides a video tutorial on how to use your website, how to post, edit or withdraw content from the website. Install new plugins so that the website becomes easy to use. Make sure you make your website public. Permalinks are another important feature, and keep a keen eye on the comments and choose if you want to enable them or disable them.

Having a website in 2021 is as crucial as having an office. Websites can cost you a fortune. However, you can follow some steps and set up a website of your own. Choose the right platform where you want to set up your website, like WordPress. Buy a domain name and hosting package. After this, install WordPress in your system. Make sure you have made your website public.

Categories: Others Tags:

The Trick to Enable Printify Shipping Notifications for Orders in WooCommerce? Customer Notes.

July 2nd, 2021 No comments

This is a super niche blog post. But it’s been on my list forever to write down because this caused me grief for far too long.

The setup is that you can use WooCommerce to sell things on a WordPress site, of course. If what you’re selling is a physical product, one thing you can do is set that up as print-and-ship on-demand. That’s what I do, for example, with our printed posters and sweatshirts. One company that does that, and the one we use right now, is Printify. It’s not even a plugin, it’s just APIs talking to each other.

That all works fine. The problem I was having? Customers weren’t getting any shipping notifications.

For a long time, I thought this was just something Printify punted on. For example, Printify doesn’t provide customer service to your customers, only to you. So if your customer has a problem, they contact you, and if it seems like it’s a Printify problem, you need to then contact them to figure it out. That’s not my favorite, but it’s understandable, as you are acting as the storefront here and things can go wrong with orders that the store needs to deal with, not Printify.

But no shipping notifications seems bananas. That’s like table stakes for eCommerce. Not to mention you can see shipping information in the Printify dashboard. So it was a lot of…

  1. Customer wonders where order is
  2. Customer is annoyed they didn’t get any shipping notification
  3. Customer emails me
  4. I look up shipping/tracking information
  5. I send to them manually

That’s just not tenable.

The thing is though, it’s supposed to work, and it does through a sneaky little feature of core WooCommerce itself.

So an order comes in, and I can see it:

Once the payment is solid, it’ll kick over to Printify, and I can see the order there too.

Once Printify has tracking information, it becomes available in the Printify dashboard:

Most orders do. Some orders just randomly don’t — although that’s mostly international orders (e.g. from the U.S. to another country)

The trick is that this tracking information doesn’t just stay in Printify. They API it over to the WordPress site as well in the form of a “note” on the order. So you can see it there:

Showing shipping information in a meta box in the WordPress editor for an order. The box is a light blue with shipping information for a CSS Grid power, and CSS Flexbox poster with a URL to the tracking status.

Notes are, in a sense, kind of abitrary metadata on orders. You can just type whatever you want as a note and either add it privately or visibly to the user.

Showing a meta box in the WordPress editor with a white textarea with an Add Note label and a typed note in it that says I hope you love the poster! Take a photo of it and send it to me if you wanna! There is an option selected to display the note to the customer.

That was all happening normally on my site.

Here was my problem:

The email notification settings screen in WooCommerce settings showing a list of notifications and one highlighted for a custom note notification.
My “Customer note” email was turned off.

I was confused I guess because I didn’t really understand the “Notes” idea in WordPress and it wasn’t documented anywhere saying that is how Printify communicates this information. It just dawned on me looking at it for the 100th time. Why that was off? I don’t know. Does it default to off? Did I turn it off because I didn’t understand it, and turning off customer-facing emails I don’t understand felt right at some point? Again, I don’t know. I also maybe just assumed that Printify would email the customer the tracking information because they have that information, as well as the customer email. Who knows.

With it on, though, it works!

Point is: by turning this email on, it went from a ton of very manual customer service work to almost none. So I wanted to get it blogged in case anyone is in this frustrating situation like I was.


The post The Trick to Enable Printify Shipping Notifications for Orders in WooCommerce? Customer Notes. appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

CSS for Web Vitals

July 1st, 2021 No comments

The marketing for Core Web Vitals (CWV) has been a massive success. I guess that’s what happens when the world’s dominant search engine tells people that something’s going to be an SEO factor. Ya know what language can play a huge role in those CWV scores? I’ll wait five minutes for you to think of it. Just kidding, it’s CSS.

Katie Hempenius and Una Kravets:

The way you write your styles and build layouts can have a major impact on Core Web Vitals. This is particularly true for Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP).

For example…

  • Absolutely positioning things takes them out of flow and prevents layout shifting (but please don’t read that as we should absolute position everything).
  • Don’t load images you don’t have to (e.g. use a CSS gradient instead), which lends a bit of credibility to this.
  • Perfect font fallbacks definitely help layout shifting.

There are a bunch more practical ideas in the article and they’re all good ideas (because good performance is good for lots of reasons), even if the SEO angle isn’t compelling to you.

Direct Link to ArticlePermalink


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

Categories: Designing, Others Tags:

App Platform on Digital Ocean

July 1st, 2021 No comments
  • This isn’t just for static sites: it’s for PHP, Node, Python, Ruby, Go, Docker Containers, etc.
  • You don’t have to configure and update things, these are boxes ready-to-go for those technologies.
  • You can scale to whatever you need.
  • You don’t pay by the team seat. Unlimited team members. You pay by usage like bandwidth and build time.

This is new stuff from DO.

App Platform is a hosting product, no surprise there, but it has some features that are Jamstack-inspired in the best possible way, and an additional set of unique and powerful features. Let’s start with some basics:

  • Static sites can be hosted on the free tier
  • Automatic HTTPS
  • Global CDN (Cloudflare is in front, so you’re DDoS safe)
  • Deploy from Git

That’s the stuff that developers like me are loving these days. Take some of the hardest, toil-laden, no-fun aspects of web development and entirely do them for me.

And now the drumroll:

  • This isn’t just for static sites: it’s for PHP, Node, Python, Ruby, Go, Docker Containers, etc.
  • You don’t have to configure and update things, these are boxes ready-to-go for those technologies.
  • You can scale to whatever you need.
  • You don’t pay by the team seat. Unlimited team members. You pay by usage like bandwidth and build time.

Use that link to get $100 in credit over 60 days.

It extremely easy to deploy a static site

You snag it right from GitHub (or GitLab, or Docker Hub), which is great right away, and off you go.

Then we get our first little hint of something compelling right away:

But let’s say we don’t need that immediately, we can go with a free plan and get this out.

The site will build and you can see logs:

And lookie that my static site is LIVE!

Say my site needs to run an actual build process? That, and lots more configuration come in the form of an “App Spec”. This is where I would include those build commands, change Git information, deployment zones, and loads more.

About that database…

Wasn’t that interesting to see the setup steps for this static site suggest adding a database? So many sites need some kind of data store, and it’s often left up to developers to go find some kind of cloud-accessible data storage that will work well with their app. With Digital Ocean App Platform, it can live right alongside your static app.

It’s called a component.

As you can see, it can be, but doesn’t have to be a Database. It could be another type of server! Here I could pop a PostgreSQL DB on there for just $7/month.

If what you need to add is an internal or external service, it will let you add that via another Git repo that you hook up. Oh my what a modern system you now have. A front end and a back end each individually deployable directly via Git itself.

This is for server-side apps as well.

This feels big to me! I get that same kinda easy DX feeling I get with static sites, but with, say, a Python or Ruby on Rails app. Free deployment! Server boxes I don’t have to configure and manage myself!

Seems like a pretty happy-path hosting environment for lots of stuff.

Use that link to get $100 in credit over 60 days.


The post App Platform on Digital Ocean appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

17 Things You Can Do To Improve Your SEO Ranking In 2021

July 1st, 2021 No comments

There’s no shortcut to success when it comes to Google search results. That is unless you count pay-per-click advertising.

While pay-to-play will shoot your site to the top of the SERP immediately, it’s not a sustainable strategy for maintaining your position there. So, you’re going to have to get serious about SEO.

This guide will show you what to do to improve your SEO ranking and start seeing results this year:

  1. Use Google Analytics to track metrics
  2. Get an SSL certificate
  3. Improve mobile page speed
  4. Design a mobile-first UI
  5. Make your site accessible
  6. Optimize your images
  7. Create great content
  8. Structure your content for scannability and readability
  9. Create click-worthy title tags and meta descriptions
  10. Choose one focus keyword per page
  11. Improve your internal link strategy
  12. Use only trustworthy external links
  13. Get your site listed as a featured snippet
  14. Get high-quality backlinks
  15. Create a Google My Business page
  16. Refresh Your Content
  17. Regularly monitor Google Search Console

How to Increase Your Website’s SEO Ranking

If you can improve your SEO ranking — and get your pages closer to, if not on the highly coveted top SERP — you will:

  • Boost your site’s overall visibility as its authority in search grows;
  • Bring high-quality traffic to your pages;
  • Drive-up your conversion rate.

That said, search engine optimization is most effective when it’s an ongoing strategy as opposed to something you set up and forget about. So, some of the suggestions below will only need to be implemented once, while others you’ll have to return to every six months or so to make sure your site is on track.

Let’s get started.

1. Use Google Analytics to Track Metrics

If you haven’t yet begun tracking your website’s activity with Google Analytics, it’s the very first thing you need to do.

While Google Analytics alone can’t tell you how well or poorly your website ranks, there’s valuable data in there about what happens to the traffic that arrives from Google. Or any search engine your visitors use.

You can find this information under Acquisition > Source/Medium:

What you want to see here is that (1) you’re getting lots of visitors from organic search results (as opposed to paid) and (2) that they’re highly engaged. So, that means:

  • Longer times on site;
  • Multiple pages visited;
  • Lower bounce rates.

And if you configure Google Analytics to track different conversions on your site, you can see how well those organic visits convert.

Obviously, there’s a lot more you can track here. But you must understand if your SEO efforts are working in the first place, and that’s where you’ll get your confirmation.

2. Get an SSL Certificate

HTTPS has long been one of Google’s SEO ranking factors. Yet, of the two billion-plus websites that are online today, BuiltWith data shows that only 155 million have an SSL certificate installed:

Security and privacy are major concerns for consumers. So if you want to increase their confidence in your website, installing an SSL certificate is an easy thing to do. And it’ll put you in Google’s good graces, too.

If you don’t have one already, get one for free from Zero SSL.

3. Improve Mobile Page Speeds

Mobile loading speeds became a Google ranking signal in July 2018.

It was something we saw coming ever since smartphones overtook the desktop as the primary device people used to access the Internet. Once it became a ranking factor, though, mobile page speed was something we could no longer treat as a “nice to have.” It became a must.

And with Google’s most recent Core Web Vitals algorithm update, there’s no ignoring how big of a role your site’s mobile loading speeds (i.e., performance) play in ranking it.

To ensure that your site meets Google’s expectations for speed, bookmark the Core Web Vitals tool. It’ll tell you how your site performs across all four of the major ranking categories.

You’ll find your speed-related issues at the bottom of the page, along with resources to help you resolve them.

Most of those tips will have to do with optimizing your code. However, there are other things you can do to make your site load quickly:

  • Use well-coded themes and plugins;
  • Remove unused themes, plugins, media, pages, comments, backups, and so on from your database and server;
  • Install a caching plugin that’ll minify, compress, and otherwise make your site lightweight and fast.

It’s also not a bad idea to review your web hosting plan. You might not have the right amount of server power or resources to keep up with your existing activity.

4. Design a Mobile-First UI

On a related note, a mobile-first design can also improve your site’s loading speeds. Rebekah Carter wrote a really helpful guide on how to do this last year.

In addition to speeding things up — since you won’t be trying to jam a bunch of desktop-first design and content into a smartphone screen — it’s going to help your site rank better.

Just be careful when you do this. A mobile-first design doesn’t mean creating a scaled-back version of the larger site for smartphone users.

In fact, Google explicitly tells us not to do that and why:

“If it’s your intention that the mobile page should have less content than the desktop page, you can expect some traffic loss when your site is enabled mobile-first indexing, since Google can’t get as much information from your page as before.”

And if your response is that the content on desktop-only doesn’t matter, then it really shouldn’t be there. Don’t waste your visitors’ time with useless or repetitive content, as it’ll only give them more reason to abandon your site.

5. Make Your Site Accessible

Accessibility has come to the forefront of the SEO discussion thanks to Core Web Vitals.

Now, running your site through the tool will tell you if there are any inaccessibility issues that Google will ping you for. But that doesn’t make your site completely accessible.

Considering the rise in website accessibility-related lawsuits, you’ll want to take this seriously.

Because a bad experience due to inaccessibility won’t just cost you visitors and a lower search ranking, it’ll cost you a lot of money, too.

Here are some things you can do to ensure that your site and all its content is accessible.

6. Optimize Your Images

Technically, image optimization falls under the page speed tip. However, that’s not the only way you should be optimizing your images, which is why I wanted to address this separately.

According to HTTP Archive, the average weight of a mobile web page these days is 1917.5 KB. Images take up a sizable chunk of that weight:

Because of this, bloated image sizes are often to blame for slow pages.

You can do several things to optimize your images for speed, like using lightweight formats, resizing them, and compressing them. You’ll find 6 other image optimization tips here.

While those tips will help you speed up your site and, consequently, improve your SEO ranking, there’s something else you need to do:

Add alt text to your most important images.

One reason to do this is to improve accessibility. Another is so your web page can rank in both the regular Google search results and image results as this search for “WordPress by the numbers” does:

If you can write alt text that perfectly describes your graphic and matches the image searchers’ intent, you can create another ranking opportunity for your page.

7. Create Great Content

There are many technical ranking factors you have to pay attention to if you want to create a good experience for your visitors and rank well as a result. However, none of that will matter if your content sucks.

So, how do you make great content? It really depends.

Think about the difference between a page describing your web design services and a product page for a blender.

Your web design services page would need to:

  • Explain why hiring a web designer is a must;
  • What your design services entail;
  • What they can expect in terms of results;
  • Include some proof in the form of testimonials or portfolio samples;
  • Have information on next steps or how to get in touch.

That would be a comprehensive and useful page. If business owners searched for “hire a web designer near me” or “should I hire a web designer?”, that page would sufficiently answer their query.

A product page, however, would need to:

  • Provide a brief summary of the blender;
  • Show photos of the blender, different angles of it, as well as different variations of the product;
  • Display the price;
  • Allow customers to Add to Cart or Save for later;
  • Include technical specs of the blender;
  • Recommend related products;
  • Display sortable customer testimonials and ratings.

The last thing a shopper would want is to be directed to a product page that reads like one of your services pages.

So, great content not only needs to be well-written and error-free, but it needs to match the searcher’s intent and expectations. If you can do that, your visitors will stay as long as they need to read through everything, which will help strengthen the page’s ranking.

8. Structure Your Content for Scannability and Readability

Including necessary details and in the right format is an important part of making a page’s content valuable to the visitor. The structure is going to help, too.

For starters, you want to make sure every page is human-readable. So, that involves:

  • Shorter sentences and paragraphs;
  • Linkable table of contents for longer pages;
  • Header tags every few hundred words;
  • Descriptive and supportive imagery throughout;
  • Text callouts like blockquotes and bolded phrases.

By making a page less intimidating to read and easier to scan for a quick summary of what it is, you’ll find that more visitors are willing to read it and follow your calls to action.

You can use a tool like Hemingway to improve your page’s readability. Quickly pop the text of each page into the editor and follow the recommended suggestions:

You’re also going to have to think about how well Google’s indexing bots can read your page. They’re smart enough to pick up on cues but not smart enough to sit down and read your article on the benefits of Vitamin D or how to install a new showerhead.

So, you’ll need to use HTML meta tags as well as hierarchical header tags to tell the bots what the page is about.

If you’re building a WordPress site, you can use the Yoast SEO plugin to analyze how scannable and readable each page of your site is (among other things):

9. Create Click-Worthy Title Tags and Meta Descriptions

To get eyeballs on your really great content, the brief preview users see of it in search results needs to be able to lure them in. Get more clicks to your site from search, and Google will take notice.

But they can’t just be superficial clicks. If Google notices that your page is getting a ton of traffic that almost immediately drops off once they see the content on the page, your page will not fare well in search results.

So, your goal is to stay away from clickbait-y title tags and meta descriptions and make them click-worthy.

The first thing to focus on is the length. Google only gives you a certain amount of space to make your pitch.

There are many tools you can use for this, but I prefer Mangools’s SERP Simulator:

It allows you to play around with your URL, title tag, and meta description and to watch in real-time as it fits the allotted space. You can also compare it to the pages that currently rank for the keyword you’re going after, which can be a really useful reference point. After all, if those sites have made it to the first SERP, then they’re doing something right.

Another thing to think about when writing click-worthy titles is how engaging they are.

The tool I recommend for this is CoSchedule’s Headline Studio:

I don’t find this useful so much for basic web pages. You don’t need to get creative with something like your About or Contact pages. But for content marketing? If you want to beat out competing articles for attention in Google, this tool will be very useful.

10. Choose One Focus Keyword Per Page

It’s not as though you can add a keyword tag to your page, and Google will automatically rank your site for it. That’s not what keyword optimization is.

Instead, what you do is select one unique keyword per page and write the content around it. So, it’s really more about creating a clear focus for yourself and then comprehensively unpacking the subject matter on the page.

Keep in mind, though, that if you want to improve your chances of ranking for the keyword, it needs to be relevant to your brand, useful for your audience, and your site needs to actually be able to compete for it.

You can use the Google Keyword Planner to find keywords that fit those criteria:

Ultimately, you should choose a keyword that:

  • Has a decent amount of monthly searches — over 1,000 is what I aim for;
  • Have “Low” to “Medium” amount of competition, but the lower, the better;
  • Matches the user intent. So take that keyword, put it into Google and see what you find. Then, look at the sites on that first page of search results. Do they match what your own page will address? If so, then you’ve found a keyword that aligns with your users’ search intent.

Now, if you’re writing great content that addresses your visitors’ questions and concerns, then optimizing for your focus keywords will happen naturally. The same goes for related keywords you might want to target. As you write the content for each page, the keywords will organically appear.

But remember how I said Google’s indexing bots need certain HTML and header tags to “read” the content on the page? This means you’ll need to include the focus keyword in some of those areas, so there is no question about what the page is about.

Here’s where your focus keyword should show up:

  • Title tag (H1);
  • Meta description;
  • Slug (hyperlink);
  • Within the intro;
  • The first H2 header tag;
  • Alt text for the most important image on the page;
  • Within the conclusion.

It should also appear throughout the page, along with variations of the keyword that people might search for.

You can use the Yoast SEO plugin to analyze this as well.

11. Improve Your Internal Link Strategy

Okay, so here’s where we start to get into SEO strategies that Google might not directly care about, but that can still drastically improve how well your site ranks.

Internal links, in particular, are valuable because they create an interconnected structure for your site. Here’s a basic example of why that’s important:

Let’s say these are the pages on your website. Each of them can be accessed from the home page and main navigation. This structure tells us that each page is related to the overall message and mission of the company, but they are not related to one another. And that doesn’t make sense, right?

When you’re educating visitors on your Web Design services, it’s naturally going to come up that you also happen to specialize in WordPress and eCommerce design. So, those internal links should appear on your Web Design page. And vice versa.

In addition, your Portfolio and Contact Us pages are likely going to be the most common CTAs on the site. Your prospective clients shouldn’t be forced to backtrack to the homepage or scroll up to the navigation to take action. By including these internal links or buttons within the content of the services pages, you’re giving them a quick and direct line to the next steps.

The more intuitive you make the user journey, the easier it will be for them to convert.

This is one reason why websites with a strong internal linking structure perform well in search results. Another reason is that internal links help Google’s bots find all of the content on your site and better understand how they relate to one another.

12. Use Only Trustworthy External Links

Link juice is one of the reasons why business owners are obsessed with getting backlinks. We’ll get to that shortly.

But it’s also something that comes into play when choosing external links to include on your site.

Link juice is the idea that one site can pass its authority to another through a dofollow link. So, by linking out to authoritative and trustworthy sources, your site may raise its own clout with the search engines because of that connection.

However, it works both ways. If you create external links to websites with misinformation that pose a security threat to visitors or are otherwise untrustworthy, that bad reputation can do your website harm.

So, make sure that every external link you use is necessary and reliable. If not, get rid of it.

13. Get Your Site Listed As a Featured Snippet

I said earlier in this post that pay-per-click advertising is the only way to shortcut the SEO process and get on the first page of Google. That’s not entirely true.

We’ve already seen how optimizing your images for Google Images search can shoot your site to the top of results. Another way to get ahead is by optimizing your page using structured data to land a spot as a featured snippet.

Like this page from Bankrate that answers the question “how do you get a loan”:

Remember that structured data alone won’t instantly move your web page into the featured snippet space. The content needs to be the best it can be, and the structured data needs to be well written.

Schema.org was created to help you pick the right category and write the structured data for it:

Use this to write up the relevant microdata for the pages to make the most sense to do so. For instance, an About page probably wouldn’t benefit from having structured data attached to it. However, a lengthy blog post that explains a step-by-step process would.

There are WordPress plugins (Yoast is one of them) that will help you insert this code into your pages if you prefer.

14. Get High-Quality Backlinks

Backlinks pointing to your website are a huge indicator to Google that your site is share-worthy and authoritative.

However, like everything else in SEO, you can’t cheat your way into a bunch of backlinks. They need to come from authoritative sources, and they need to be relevant. That’s why paying or bartering for backlinks isn’t usually effective. If your web page’s backlink doesn’t organically fit within the content on their site, visitors aren’t going to click on it.

There are lots of ways to go about building up a repository of backlinks that do generate authority for you and improve your SEO ranking in the process:

Get active on social media and become an authority there: The rule is generally that 80% of your posts need to be non-promotional. By sharing content from all kinds of sources that are relevant to your audience, you’re going to get more meaningful engagement. And this’ll eventually put the spotlight on your own content and get people to share it on social media, too.

This is something that Google will look at when ranking your site: What sort of social signals are coming from your brand?

Get featured as an expert: You don’t need to become an influencer for people to view you as an expert in your field. It’s all about your reputation.

By leveraging your reputation to get speaking gigs, you’ll grow your authority even more. Just make sure they’re relevant to what you do. So, look for podcasts, webinars, and conferences in your field that are looking for experts.

Become a guest blogger: If public speaking isn’t your forte, that’s okay. Turn your attention instead to lining up guest blogging gigs.

By writing high-quality content for authoritative websites (whether you get paid or not), you’ll bring more attention to your own brand. And Google will pass that authority onto your site.

15. Create a Google My Business Page

Any business can create a Google My Business page. There are a number of SEO-related benefits to doing this.

The first is that local businesses can literally put themselves on the map with Google My Business. Here’s what a Google search for “restaurants near me” looks like:

Even if your site doesn’t appear on the first SERP, the map that sits at the top of search results can give you a front seat anyway.

Another reason to create a My Business page is that you get to control your knowledge graph sidebar, like Ford’s Garage does here:

By including high-quality graphics, pertinent details about the business, and collecting positive customer reviews, this knowledge graph could do your brand’s reputation a lot of good in the eyes of Google and your prospects.

16. Refresh Your Content

This is useful for all of the content on your site, even your most high-performing pages.

If your site is starting to gain traction, take a close look at your Google Analytics data. You may find a few pages that no one seems to be paying attention to or, worse, that they always seem to bounce from.

In Google Analytics, go to Behavior > Site Content to figure out which pages are underperforming.

Then, ask yourself:

  1. Is this page even a necessary part of the user journey? If not, you can probably scrap it and have one less distraction on your site.
  2. If this page is necessary, what do you need to do to make it more valuable and relevant to your audience?

With the most popular pages on your site, it’s not unreasonable to expect that at least part of what you originally wrote will go stale or become irrelevant within a year or two. So, it’s a good idea to refresh these as well.

To do that, it’s simple. Do a search in Google for your focus keyword. Read through the top five results and see what sort of information your post is missing. Then update it accordingly.

Anything outdated or irrelevant should also be stripped out.

17. Regularly Monitor Google Search Console

Last but not least, you should keep your eyes on Google Search Console.

There’s a lot of valuable information in here that will tell you why your site might not be ranking as well as it could. You’ll find issues related to:

  • Indexing
  • Mobile usability
  • Security
  • Core Web Vitals

You’ll also find data on how well your site is ranking in general. You’ll find this under the Performance tab:

Use this to identify:

  • Which keywords you’re ranking for and are driving traffic to your site;
  • Which keywords you’re getting the most impressions from but not getting clicks from;
  • Which keywords you’re getting the most clicks from but not a lot of impressions;
  • Which keywords you rank low for and could stand to improve upon.

You can learn a lot about how strong your SEO strategy is. Just use the Clicks, Impressions, and Position tabs to sort your data so you can better understand what’s going on.

Then, prioritize fixing the pages that can and should be bringing your site highly qualified traffic but aren’t.

Wrap-Up

If you’re wondering how long it’ll take before you see an improvement in your SEO ranking, it depends. If your domain’s current authority is low, it can realistically take about six months to see major changes. That said, if you implement all of the suggestions above, you can certainly expedite that.

Just remember that there are no real shortcuts in SEO. You need to have an authoritative and trustworthy website and brand before anything else. So, take the time to build your credibility online so that these SEO tactics can really work.

Source

The post 17 Things You Can Do To Improve Your SEO Ranking In 2021 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Hack the “Deploy to Netlify” Button Using Environment Variables to Make a Customizable Site Generator

July 1st, 2021 No comments

If you’re anything like me, you like being lazy shortcuts. The “Deploy to Netlify” button allows me to take this lovely feature of my personality and be productive with it.

Clicking the button above lets me (or you!) instantly clone my Next.js starter project and automatically deploy it to Netlify. Wow! So easy! I’m so happy!

Now, as I was perusing the docs for the button the other night, as one does, I noticed that you can pre-fill environment variables to the sites you deploy with the button. Which got me thinking… what kind of sites could I customize with that?

Idea: “Link in Bio” website

Ah, the famed “link in bio” you see all over social media when folks want you to see all of their relevant links in life. You can sign up for the various services that’ll make one of these sites for you, but what if you could make one yourself without having to sign up for yet another service?

But, we also are lazy and like shortcuts. Sounds like we can solve all of these problems with the “Deploy to Netlify” (DTN) button, and environment variables.

How would we build something like this?

In order to make our DTN button work, we need to make two projects that work together:

  • A template project (This is the repo that will be cloned and customized based on the environment variables passed in.)
  • A generator project (This is the project that will create the environment variables that should be passed to the button.)

I decided to be a little spicy with my examples, and so I made both projects with Vite, but the template project uses React and the generator project uses Vue.

I’ll do a high-level overview of how I built these two projects, and if you’d like to just see all the code, you can skip to the end of this post to see the final repositories!

The Template project

To start my template project, I’ll pull in Vite and React.

npm init @vitejs/app

After running this command, you can follow the prompts with whatever frameworks you’d like!

Now after doing the whole npm install thing, you’ll want to add a .local.env file and add in the environment variables you want to include. I want to have a name for the person who owns the site, their profile picture, and then all of their relevant links.

VITE_NAME=Cassidy Williams
VITE_PROFILE_PIC=https://github.com/cassidoo.png
VITE_GITHUB_LINK=https://github.com/cassidoo
VITE_TWITTER_LINK=https://twitter.com/cassidoo

You can set this up however you’d like, because this is just test data we’ll build off of! As you build out your own application, you can pull in your environment variables at any time for parsing with import.meta.env. Vite lets you access those variables from the client code with VITE_, so as you play around with variables, make sure you prepend that to your variables.

Ultimately, I made a rather large parsing function that I passed to my components to render into the template:

function getPageContent() {
  // Pull in all variables that start with VITE_ and turn it into an array
  let envVars = Object.entries(import.meta.env).filter((key) => key[0].startsWith('VITE_'))

  // Get the name and profile picture, since those are structured differently from the links
  const name = envVars.find((val) => val[0] === 'VITE_NAME')[1].replace(/_/g, ' ')
  const profilePic = envVars.find((val) => val[0] === 'VITE_PROFILE_PIC')[1]
  
  // ...
  
  // Pull all of the links, and properly format the names to be all lowercase and normalized
  let links = envVars.map((k) => {
    return [deEnvify(k[0]), k[1]]
  })

  // This object is what is ultimately sent to React to be rendered
  return { name, profilePic, links }
}

function deEnvify(str) {
  return str.replace('VITE_', '').replace('_LINK', '').toLowerCase().split('_').join(' ')
}

I can now pull in these variables into a React function that renders the components I need:

// ...
  return (
    <div>
      <img alt={vars.name} src={vars.profilePic} />
      <p>{vars.name}</p>
      {vars.links.map((l, index) => {
        return <Link key={`link${index}`} name={l[0]} href={l[1]} />
      })}
    </div>
  )

// ...

And voilà! With a little CSS, we have a “link in bio” site!

Now let’s turn this into something that doesn’t rely on hard-coded variables. Generator time!

The Generator project

I’m going to start a new Vite site, just like I did before, but I’ll be using Vue for this one, for funzies.

Now in this project, I need to generate the environment variables we talked about above. So we’ll need an input for the name, an input for the profile picture, and then a set of inputs for each link that a person might want to make.

In my App.vue template, I’ll have these separated out like so:

<template>
  <div>
    <p>
      <span>Your name:</span>
      <input type="text" v-model="name" />
	</p>
    <p>
      <span>Your profile picture:</span>	
      <input type="text" v-model="propic" />
    </p>
  </div>

  <List v-model:list="list" />

  <GenerateButton :name="name" :propic="propic" :list="list" />
</template>

In that List component, we’ll have dual inputs that gather all of the links our users might want to add:

<template>
  <div class="list">
    Add a link: <br />
    <input type="text" v-model="newItem.name" />
    <input type="text" v-model="newItem.url" @keyup.enter="addItem" />
    <button @click="addItem">+</button>

    <ListItem
      v-for="(item, index) in list"
      :key="index"
      :item="item"
      @delete="removeItem(index)"
    />
  </div>
</template>

So in this component, there’s the two inputs that are adding to an object called newItem, and then the ListItem component lists out all of the links that have been created already, and each one can delete itself.

Now, we can take all of these values we’ve gotten from our users, and populate the GenerateButton component with them to make our DTN button work!

The template in GenerateButton is just an  tag with the link. The power in this one comes from the methods in the .

// ...
methods: {
  convertLink(str) {
    // Convert each string passed in to use the VITE_WHATEVER_LINK syntax that our template expects
    return `VITE_${str.replace(/ /g, '_').toUpperCase()}_LINK`
  },
  convertListOfLinks() {
    let linkString = ''
    
    // Pass each link given by the user to our helper function
    this.list.forEach((l) => {
      linkString += `${this.convertLink(l.name)}=${l.url}&`
    })

    return linkString
  },
  // This function pushes all of our strings together into one giant link that will be put into our button that will deploy everything!
  siteLink() {
    return (
      // This is the base URL we need of our template repo, and the Netlify deploy trigger
      'https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/link-in-bio-template#' +
      'VITE_NAME=' +
      // Replacing spaces with underscores in the name so that the URL doesn't turn that into %20
      this.name.replace(/ /g, '_') +
      '&' +
      'VITE_PROFILE_PIC=' +
      this.propic +
      '&' +
      // Pulls all the links from our helper function above
      this.convertListOfLinks()
    )
  },
}, 

Believe it or not, that’s it. You can add whatever styles you like or change up what variables are passed (like themes, toggles, etc.) to make this truly customizable!

Put it all together

Once these projects are deployed, they can work together in beautiful harmony!

This is the kind of project that can really illustrate the power of customization when you have access to user-generated environment variables. It may be a small one, but when you think about generating, say, resume websites, e-commerce themes, “/uses” websites, marketing sites… the possibilities are endless for turning this into a really cool boilerplate method.


The post Hack the “Deploy to Netlify” Button Using Environment Variables to Make a Customizable Site Generator appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Key Takeaways From the Most Successful Rebranding Campaigns

July 1st, 2021 No comments

People outgrow themselves. So many things can make you, if not better, so different from what you used to be.

You could love kayaking in your younger years but would love the indoors once you turn 30. You could be a house person, then become a mountaineer as you get older. 

And if people change, so do companies. Brands can grow and shrink too. Companies that consistently reinvent themselves will ultimately grow in size, number, and power. On the other hand, companies that are not inventive and sensible enough shrink in resources and customer base. Both cases tell it’s time for a rebrand.

Because when companies change, they must change how they present their identity. 

Here in this article, we’ll take a look at some of the best cases of rebranding. True, rebranding is not always successful. Some companies failed after trying to change people’s perceptions of them. But as we will see in the following cases, companies can follow calculated strategies to make a rebrand work to their advantage. 

So buckle up and follow along. 

But first, what is a rebrand?

A rebrand is a marketing strategy that aims to change the company’s brand identity. This identity can be completely new or a slightly altered version of the old. 

A rebranding process mainly changes the following: logo, slogan, website, typography, name, term, symbols, marketing, advertising strategies, and more.

Sure, the ultimate goal of rebranding is generally positive, for example, to improve customer retention and increase brand following. But some rebranding is still bound to fail. That could be because they failed to listen to customers’ suggestions or misunderstood and disregarded their core values along the process. 

The good news is there are success stories. Some companies have managed to rebrand well enough that they became successful over the next decades. Some brands became more inclusive and poised to take over a bigger market share. So how did these companies do it? Take a look at the examples below:

1. Walmart

Old perception: 

During its early years, shoppers considered Walmart as the destination for cheap goods. At that time, inexpensive products are what matters to shoppers. So this brand identity was very successful. 

But over time, people became more sophisticated and began to search for pricier goods because they can afford them. Also, cheaper goods equaled substandard quality. So Walmart had lost its appeal. Their tagline “Always low prices” wasn’t working anymore.

Moreover, by the early 2000s, Walmart had been facing legal issues. Their shady corporate practices became the subjects of news. From then on, the public perception of Walmart continued to spiral out of control. 

Rebranding efforts:

OLYMPUS DIGITAL CAMERA

They redesigned their logo. From the previous Wal*Mart to Walmart with a starburst on the right. The typeface also features a vibrant and thinner design. 

More than that, Walmart overhauled its stores. They restructured the ceilings and widened the spaces. From the dark blue, they replaced the color palettes with light blue, green, yellow, and orange. 

They rewrote the old slogan “Always low prices” to “Save Money. Live Better”. They take the focus away from the price and more on the benefits of their products. It’s cheap, yes, but it also saves money and helps you live better. 

Results: 

People started rushing into Walmart to see if there was something new. And indeed, customers perceive the new Walmart positively with the refurbished logo and slogan and the overhaul of the stores’ interior design. 

The company started hearing reviews of how clean, fast, and friendly the stores are. Finally, the rebrand was successful enough that Walmart would become America’s number one retail store in the coming decades. 

This rebrand is also partly the reason why they can compete with Amazon. The eCommerce giant’s sheer size has prompted the closure of some small stores around the world. But not for Walmart. America’s retail giant is still relevant in the age of eCommerce. 

Lesson:

Do some customer research. Find out if your tagline and logo still work with your target audience. If not anymore, then it’s OK to change these brand features as long as a result still communicates the brand’s core. 

Change wordings and emphasize emotions. All this can make the brand more customer-centric. 

While visual identity is very important, a great rebranding campaign extends to the actual space, the products, and the services. A successful rebrand must reimagine everything there is to improve about the company. 

2. Apple

Old perception: 

In 1997, Apple was nearing bankruptcy. It had just 90 days of going broke. Microsoft and other competitors eclipsed their market share. So they had cut off a third of their workforce. 

When Steve Jobs founded the company in 1976, the goal was to make bulky and complicated personal computers more marketable. But when Jobs left, Apple was struck in a desiccate rut with zero innovative ideas and emerging competitors. On top of that, Apple was plagued with leadership turmoil and failed product launches.

When Steve Jobs came back to the boardroom after a coup, Apple was in terrible shape. By the end of that year, Apple had lost $867 million, and the total value of its shares was less than $3 billion.

Rebranding efforts:

Apple underwent a series of rebranding efforts. The first thing they did was to change the most visible aspect of the brand — their logo. The rainbow-colored Apple with a bite redesigned it to a minimalistic, futuristic, metallic, and shiny apple. 

They also changed the name of the company from Apple Computers Inc. to just Apple. Their goal was to include more products and not just personal computers. 

Apple was aiming for simplicity. Their succeeding products — the iPad, iPod, and iPhones —  had simple outside designs. The retail stores’ interior designs were minimalist too. Steve Jobs himself had carried simplicity well with his choice of turtle neck tops and basic jeans in every conference. 

Their TV advertisement “Think Different” was considered one of the ad campaigns. It suggested that Apple is a pioneer, and it pushed the boundaries of the status quo. 

Results: 

The success of their following products, namely the iPod and the iPhone, on top of their rebranding made Apple the company that it is today. As a result, the tech giant has the highest valuation of more than a trillion dollars.

The apple-with-a-bite logo is one of the most recognizable logos in the world. And because they cut off the name computers, everyone welcomed their non-computer products such as the IPhones, IPods, iWatch, iPad, Apple TVs, gaming, and many other tech innovations and digital services. 

They have the most loyal brand following in the world. People rush into the stores and gorge on any information they can get every time Apple announces a product launch. 

Even today, when the smartphone market is very saturated, Apple still claims one of the largest market shares and dominates every part of the globe. 

Lesson: 

Rebranding is more than just the visuals. It includes the quality and innovativeness of the products. The good thing with Apple is they cracked both factors. Visual-wise, a lot of people loved the minimalistic approach to everything — from physical stores to websites. With their products, people believed that their life would be better using them. 

So in trying to rebrand, it’s vital to assess what lacks in both the visuals and products. And make sure that you intertwine them in the process. For the visuals, it has to be unique that most people will love. For the products, they have to be beneficial enough. 

3. Instagram

Old perception: 

On the 26th of October in 2010, another social media company entered the market. In the following years, Instagram would become a social media giant, with users amounting to 1 billion in 2021. Now, Instagram is the destination of companies that are aiming to penetrate a vast market. 

However, Instagram in its early years was just a simple photo-sharing platform. Users choose filters, and they can post them for their followers to like and share. There was no existence of online selling of some sorts, not even influencers or many professional creators. 

As the social media company enjoyed tremendous success, it grew in size. Creators and celebrities proliferated on the app. By then, almost all types of companies and brands joined the platform. As a result, Instagram is now a hotbed of many other things. 

So the old perception of Instagram as a photo-sharing platform alone doesn’t do it anymore. They had to evolve in some way.

Rebranding efforts:

Instagram focused its rebranding efforts on its visual presence. Instagram used to have an incoherent design. For example, the brown colors of its logo cannot be seen anywhere on the app. Plus, the old logo — a retro camera — resembles Instagram’s antiquated features. 

So when Instagram developed into a multi-faceted social media, not just a photo-sharing platform, the previous logo had to go. Designers replaced it with a flat-designed neon camera. The many colors resemble the diverse community of creators, professionals, celebrities, government, and companies who have used the platform. 

They also changed the design of its companion apps such as Hyperlapse, Boomerang, and Layout. The new look mimics that of the logo, with different shades of light pink and yellow.

Results: 

From then on, Instagram grew to a billion users. What was supposed to have been achieved in 2020, the app has gained a billion users in just 2018. It may not be because of its rebranding alone. Instagram has made significant innovations in the past few years. Things like IG stores, stories, IGTV, etc. 

But because of its rebranding, the company has eradicated its limitations. So do the customers used to view IG as an old photo-sharing app. Not anymore. 

Instagram is now the leading force to shape brand awareness and social issues. And it continues to become a top social media app after ten years, only behind Facebook, its parent company. 

Lesson:

Companies mostly focus on themselves when trying to craft their branding or rebranding. For example, they want to emphasize the computers on logos because they provide computing services. Or they want to pick a green color because they’re a sustainable company. 

And it’s not inherently wrong. In fact, it’s always the first step when creating a brand—looking inwards. But sometimes, it’s a good idea to look outwards, see the customers, and define their definition when viewed as a whole. 

Instagram did it right when they first looked into their customers, and second, they defined them. Whether it’s the design of the logo or the colors, it has manifested well. 

4. Airbnb

Old perception:

The original idea behind Airbnb is for people to book hotels, motels, and rooms or houses in the comfort of their mobile phones. And indeed, it has lived up to its promise. Upon its launch, thousands of people book stays through Airbnb.  

But after several years, Airbnb’s services began to diversify. From just the booking service, it started to include experiences, like glamping, camping, surfing, lake fishing, etc. In addition, many people were interested in staying in host families and hostels where they soak in the unfamiliarity of the language and foreign culture. 

The company brand, however, does not reflect those customers’ growing interests. Instead, the logo and other visual identities were the same as when the company was founded years ago.

Rebranding efforts:

To assess the Airbnb experience, designers stayed on many hosts across 13 cities and four continents. As a result, the designers understand what mattered the most to Airbnb users through this journey — a sense of belonging. 

Because of this revelation, they rewrote the script logotype with a simple sans serif typeface. And then they created a new logomark which is what they called the Bélo. It’s an inverted heart that talks about people, love, places, and Airbnb. They also transferred this new typography, photography, and color palette to other visual assets like websites, apps, and other areas. 

As is with any rebrand, it’s most effective when carried over to a much deeper level. Airbnb provided their employees some day-offs and free community outreach programs, so they, too, experience Airbnb’s value of belonging. 

Results: 

The company’s rebranding was a significant success. Although not all people initially love the idea, they eventually get the point. As a result, Airbnb won an award as Meaningful Brand of the Year 2016 from The Drum Marketing Awards. 

Airbnb has never been successful. It has grown to a valuation of more than 30 billion dollars, with more than six million listings in 200 countries and 2 million people staying every night. The message to investors and customers was clear-cut, that wherever community they are in, they belong. 

Lesson:

Do your research. Ask your consumers what makes your services unique. Why do they continue to patronize your company despite several others in the market? What is the emotion involved? 

Better yet, experience the services yourself. If you’re the one to design the logo or direct the rebranding, you must have experienced everything about the products and the services. 

Like the Airbnb designers, they made sure they themselves know what makes the customers continue loving the company. And once they figured it out, which is that sense of belonging, it just gradually poured over every aspect of their campaign.

5. Dunkin

Old perception:

Everyone knows Dunkin’ sells doughnuts. Their old name says so. The company used to sell doughnuts and coffee. Now they offer breakfast meals, sandwiches, milk teas, and more. So while Dunking got famous by selling doughnuts, they’re not the only product that makes up their huge sales. 

Moreover, Dunkin’ is often associated with those cobblestone stores and antiquated physical shops. So the company had to deal with these people’s perceptions of their stores. Also, more and more coffee shops are sprouting everywhere with advanced technological services that Dunkin Donuts lack.

Rebranding efforts:

The company has enjoyed great success since its founding. But since their services have diversified, their old brand image no longer works. 

The first thing they did was cut off “Doughnuts” in their name. So what was left was Dunkin’. But, of course, their customers mostly call the brand Dunkin’ even before they slash Doughnuts off, so it’s not a big deal. 

Plus, Dunkin’ wants people to pay attention to its coffee products, who happen to be big sellers too. The designers did not change all aspects of the logo. They retained the familiar store colors of pink, purple, and orange.

In addressing their antiquated stores, the company also rebranded as a tech-friendly business. They invested 100 million dollars in reinventing their stores. The company bought new equipment for faster drive-through lanes should people order on their phones.

Results: 

It’s too early to tell the aftermath of the company’s rebrand. But so far, the company has enjoyed a positive perception. Dunkin’ was able to expand its territory too. With more products and services to offer, the company has driven more sales. But more than that, they repositioned their brand now as a competitor to the ever-growing beverage industry.

Leveling up the technological game is not something any brand can go wrong with. More companies are technologically efficient. And more people love to buy things from their phones. So Dunkin’ did just right when they rebranded as someone who loves technology. 

Lesson:

A company can outgrow its previous image. It’s better to undergo rebranding in this case. Two positive effects can happen. First, the brand could include more services, entice a bigger market share, and challenge different industries. Second, the company can outgrow some of its unpleasant sides while staying true to what makes it unique and great in the first place. 

In the case of Dunkin, they are still a doughnut shop, but not exclusively. They now offer many products. And their investments in tech have enticed millennial and techie consumers. 

Final Thoughts

Rebranding is more than just the visual identity. True, as the most visible part of the brand, logos are what most people see when companies undergo a rebrand. You can do so in a free logo maker tool or have your logo professionally designed as most big companies do. 

The next things people notice are the choice of typefaces, colors, stores, and more. Yes, changing visuals are so vital to rebranding. But it’s supposed to be just a conduit of something bigger. A good rebranding strategy involves more than just visuals. There has to be corporate and customer values, future perspectives, the importance of the brand to the customers, unique selling points, storytelling, etc. 

Not including them can result in a short-lived rebranding success. On the other hand, if brands carefully consider these factors, decades of success await. So what are you waiting for? Is it time for your company to rebrand? If so, what are the factors you’re considering? Share in the comments. 

Categories: Others Tags:

7 Smart Ways to use Chatbots for e-Commerce Business

July 1st, 2021 No comments

Chatbots are revolutionizing the e-commerce sector and enabling merchants to offer better purchasing experiences.

AI chatbots are growing enormously in the corporate sector. In a report published by Grand View Research, the chatbot market is expected to expand at a compound annual growth rate (CAGR) of 24.9% from 2021 to 2028.

With chatbot app development gaining more popularity, the e-commerce sector is booming, with more companies seeking to get consumers into the chatbots’ primary target market. Let’s see how you can use chatbots to boost your e-commerce business.

1. Acquire Customers

Customer acquisition is every business’s target, and chatbots can help e-commerce businesses achieve this goal. The AI-powered chatbots offer personalized engagement like none other. They mimic human interactions and respond to the user with desired information like a sales representative would. Also, since the chatbots can access a large set of data repositories, they enhance customer experience by offering personalized recommendations to them, depending upon their query and spending pattern. This is one of the most efficient features that make the chatbots interactive and engaging for the customers.

2. Collect Relevant Customer Data

Every chatbot on an e-commerce website is dedicated to that particular niche and therefore can collect relevant customer data. Chatbots can accumulate data efficiently and also use it to analyze customer patterns and offer appropriate suggestions. With the machine learning algorithms used in the chatbot app development, these bots can help business owners target their potential clients and get valuable insights to improve their businesses.

3. Manage Stores 

Chatbots can be made to watch your inventory to let you and your customers know that you can launch a specific item on your online shop for a particular time. This certainly makes the fresh products coming up sweet and exciting for your customers. Likewise, chatbots may be designed to make it known to a client that the goods they wanted are back in stock. It also enables the shop’s storage to be managed by keeping track of the things to be reordered or complaining about the faulty products currently in use.

4. Offer Personalized Experience

A personalized experience is one of the best services that chatbots can offer. We all know how bad it feels to keep waiting to get connected to the customer service when we need them the most. You can use chatbots to offer a personalized experience to every user depending upon their choices/responses. For instance, if you have a clothing store, the chatbot may help you find the right style depending upon factors such as your body shape, color preference, and more. When customers are satisfied with the way they are entertained, the business growth becomes definite. 

5. Get Relevant Leads

Lead generation is one of the most critical aspects of boosting a business sale. Hefty amounts are to be paid to obtain the most valuable leads for your business. However, if you do not want to be a part of the herd, you can employ your AI-powered chatbots to generate the leads for you. No matter how the customer has reached your website, if your chatbot is smartly applied, it can help you bring the leads you have been looking for. 

6. Improve Conversion Rate

When a user visits your e-commerce website, he/she is looking for a specific product or service. If it is difficult for them to reach their desired product, they may not revisit your website. Therefore, to engage the potential customers, something better must be done. Not only should your website be user-friendly, but your chatbot must be easy as well. You can use your chatbots to offer information about new products/services. If a customer cannot browse the website efficiently, the chatbots must take the customers to the desired product/service. Once the customer is satisfied, they are likely to become your regulars.

7. Retain Customers

Chatbots function as a complete source of product information and help consumers answer their queries or hesitations on the way to the checkout page. The program continues to learn to offer high-quality customer interactions with time through every encounter with a customer. Clothing brands such as H&M use its Chatbot program to provide live fashion tips. When clients question styles, this feature of the mobile e-commerce application makes it fun for them to explore new styles and improve their sales. When customers get more than what they have wished for, they are retained for a lifetime.

Summing It Up

With the introduction of chatbots, the e-commerce sector is changing. Auto engagement tools like Chatbots have become a significant component of online and offline purchasing, directly affecting sales and using e-commerce marketing advantages. Chatbots are being used to respond quickly, improve customer service, collect consumer information and offer a rewarding buying experience overall. 

If you haven’t tried chatbots for your e-commerce business, it’s time to employ them to boost your business. 

Categories: Others Tags: