Archive

Archive for July 1st, 2021

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: