Email Services justification

 

When comparing Mailchimp and GoDaddy Email Services, it's important to focus on the specific needs and goals of your client, as both platforms offer distinct features that can be beneficial depending on the use case. Here’s a breakdown to help you convince a client to use Mailchimp over GoDaddy Email for their website, as well as provide alternatives that could be beneficial in certain cases.

1. Key Differences Between Mailchimp and GoDaddy Email Services

Mailchimp:

• Specialized for Email Marketing: Mailchimp is primarily known for its email marketing features, offering tools to design campaigns, automate emails, segment audiences, track results, and more. While Mailchimp started as an email service provider (ESP), it has grown to include more tools for marketing automation and customer relationship management (CRM).

• Advanced Analytics: Mailchimp offers advanced reporting and analytics, which allows you to track email performance, audience engagement, conversion rates, and more. This is valuable for clients who need insights into their campaigns to improve their marketing strategies.

• Ease of Use: Mailchimp’s drag-and-drop editor for creating newsletters and marketing emails is user-friendly, even for non-technical users. It’s a great option for small businesses looking to run campaigns with little technical knowledge.

• Automation: Mailchimp’s marketing automation features (e.g., triggered emails, welcome series, abandoned cart reminders) allow businesses to set up automated email workflows, which helps engage customers without manual intervention.

• Free Plan Available: Mailchimp’s free plan includes 500 subscribers and 3,500 emails per month, with access to basic email marketing features. This is an excellent starting point for small businesses or startups.

GoDaddy Email Services:

• Primarily for Hosting and Basic Email: GoDaddy’s email offerings (e.g., Office 365, Professional Email) are typically email hosting services bundled with website hosting or domain registration. They are useful for clients who want a business email like name@domain.com, but lacking advanced marketing features.

• Basic Features: GoDaddy's email services are mostly focused on providing reliable email hosting, calendar integration, address book management, and basic spam filtering. It doesn’t provide the rich features that Mailchimp does for marketing automation or advanced email tracking.

• Price: GoDaddy’s email service is usually bundled with hosting plans or can be purchased as a standalone service, often at a higher price compared to similar offerings. For clients only looking for a basic email service without marketing capabilities, GoDaddy might be an option, but they lack some of the added value Mailchimp brings to email marketing.

2. Convincing the Client to Use Mailchimp Over GoDaddy Email Service

Here’s how you might position Mailchimp as a better choice over GoDaddy Email for your client:

a) If the Client’s Focus is Email Marketing or Campaigns:

• Rich Features for Email Marketing: If your client is looking for a way to not just send emails but also grow their business through marketing campaigns, Mailchimp’s advanced features (e.g., segmentation, automation, landing pages, A/B testing) will be far more useful than GoDaddy’s basic email offering.

• Analytics & Reporting: Show your client how Mailchimp’s analytics can provide valuable insights, helping them track their email campaign performance, optimize their strategy, and improve engagement rates. GoDaddy doesn’t offer robust email campaign analytics.

• Email Automation: For a client who wants to automate emails based on specific triggers (e.g., welcome email, abandoned cart email, etc.), Mailchimp’s automation features are highly valuable. GoDaddy does not provide this kind of marketing-focused automation.

• User-Friendly Design: If the client doesn’t have technical expertise but needs to send attractive emails or newsletters, Mailchimp’s drag-and-drop email builder and pre-built templates are perfect for them. GoDaddy’s email platform lacks these types of marketing-centric design features.

b) If the Client Needs Business-Grade Email Hosting:

• Separate Needs for Business Emails: If the client’s primary need is not marketing but just business communication (e.g., a professional email with their domain), GoDaddy’s Professional Email or Office 365 might still be a good option. You could suggest this service if their focus is simply email hosting with domain support (e.g., contact@company.com).

However, you could recommend Mailchimp for the client’s marketing needs and use GoDaddy (or another provider) for their basic email.

c) Cost Considerations:

• Free Plan & Scalable Options: For businesses starting small or with a low budget, Mailchimp's free plan offers 500 subscribers and 3,500 emails/month, while GoDaddy charges for email hosting, which may not justify the cost if the client is only sending marketing emails.

• Pricing Transparency: Mailchimp provides clear pricing tiers based on subscribers and emails sent, allowing clients to scale as their business grows. GoDaddy may be more opaque with pricing structures, depending on which plan your client chooses.

3. Alternative Free Email Services to Suggest for Specific Needs

If Mailchimp isn’t the right fit for the client or if they are looking for other free email services (for general communication), here are a few alternatives to consider:

a) Gmail (Google Workspace)

• Free & Paid Options: Gmail offers personal and business email services. The free Gmail service is widely popular, and the business version (Google Workspace) provides more features like a custom domain, calendar, cloud storage, etc.
• User-Friendly: Gmail is known for its simplicity, reliability, and integration with other Google services, which may be helpful for your client if they use Google tools like Docs, Sheets, or Drive.

b) Zoho Mail

• Free Plan: Zoho offers a free email hosting plan for up to 5 users with 5GB of storage per user, a great option for small businesses.
• Advanced Features: Zoho also offers advanced features such as email routing, filters, and calendar integrations with additional options in their paid plans.

c) ProtonMail

• Secure Email: ProtonMail is free for personal use, with additional privacy features like end-to-end encryption.
• Business Option: ProtonMail also offers paid plans for businesses that prioritize secure and private email communication.

d) Outlook (Microsoft 365)

• Microsoft Email Hosting: If your client is already using Microsoft products, Outlook is a reliable option. They provide free Outlook.com accounts and paid Microsoft 365 Business plans for more features like custom domains, cloud storage, etc.

e) Sendinblue

• Email Marketing Free Plan: Sendinblue offers email marketing with a free plan that allows up to 300 emails/day to unlimited contacts, which is ideal for businesses that want to send newsletters or marketing campaigns on a smaller scale.

---

4. AI Techniques to Optimize Email Marketing Automation in Real-Time

To further optimize and modernize email marketing for your clients using AI and automation, here are some AI-powered techniques you could leverage:

1. Personalized Content and Segmentation:

   • Use AI to analyze customer behavior, segment audiences into specific categories (e.g., demographics, interests, purchase history), and send personalized email content based on this data.
   • Predictive Analytics: AI can predict the best time to send emails or which products or content to recommend based on past user behavior.

2. A/B Testing Automation:

   • AI can automatically conduct A/B tests on subject lines, content, and send times to optimize future email campaigns for higher engagement rates.

3. Dynamic Email Content:

   • AI can help generate dynamic email content that changes based on the recipient's preferences, location, or behavior. For example, showing personalized discounts or recommended products to users based on their past interactions with the brand.

4. Sentiment Analysis:

   • Implement sentiment analysis using AI to understand how users feel about certain email campaigns and adjust strategies accordingly. This can improve engagement and customer loyalty over time.

5. Automation of Email Workflows:

   • Automate email workflows (e.g., welcome series, abandoned cart emails, post-purchase follow-ups) to improve conversion rates and customer retention using AI-based tools.

---

Conclusion:

• If your client needs advanced email marketing features such as automation, segmentation, and analytics, Mailchimp is the better choice over GoDaddy Email Services. It’s especially great for businesses looking to grow through email marketing rather than just basic email hosting.

• For those focused on simple business emails without a heavy marketing focus, services like Gmail, Zoho Mail, or ProtonMail might be more appropriate.

• AI techniques can be applied to optimize email marketing automation, improve personalization, and maximize engagement with the audience, regardless of the platform used.

By understanding your client's needs and explaining the value proposition of each service, you can make an informed recommendation that aligns with their goals.

CSS min() All The Things

 experiments with the CSS min() function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his findings.

Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together. And the result was… not too bad, actually.

See the Pen Container Units for All Units [forked] by Chris Coyier.

What I found interesting about this is how it demonstrates the complexity of sizing things. We’re constrained to absolute and relative units in CSS, so we’re either stuck at a specific size (e.g., px) or computing the size based on sizing declared on another element (e.g., %, em, rem, vw, vh, and so on). Both come with compromises, so it’s not like there is a “correct” way to go about things — it’s about the element’s context — and leaning heavily in any one direction doesn’t remedy that.

I thought I’d try my own experiment but with the CSS min() function instead of container query units. Why? Well, first off, we can supply the function with any type of length unit we want, which makes the approach a little more flexible than working with one type of unit. But the real reason I wanted to do this is personal interest more than anything else.

The Demo

I won’t make you wait for the end to see how my min() experiment went:

We’ll talk about that more after we walk through the details.

A Little About min()

The min() function takes two values and applies the smallest one, whichever one happens to be in the element’s context. For example, we can say we want an element to be as wide as 50% of whatever container it is in. And if 50% is greater than, say 200px, cap the width there instead.

See the Pen [forked] by Geoff Graham.

So, min() is sort of like container query units in the sense that it is aware of how much available space it has in its container. But it’s different in that min() isn’t querying its container dimensions to compute the final value. We supply it with two acceptable lengths, and it determines which is best given the context. That makes min() (and max() for that matter) a useful tool for responsive layouts that adapt to the viewport’s size. It uses conditional logic to determine the “best” match, which means it can help adapt layouts without needing to reach for CSS media queries.

.element {
  width: min(200px, 50%);
}

/* Close to this: */
.element {
  width: 200px;

  @media (min-width: 600px) {
    width: 50%;
  }
}

The difference between min() and @media in that example is that we’re telling the browser to set the element’s width to 50% at a specific breakpoint of 600px. With min(), it switches things up automatically as the amount of available space changes, whatever viewport size that happens to be.

When I use the min(), I think of it as having the ability to make smart decisions based on context. We don’t have to do the thinking or calculations to determine which value is used. However, using min() coupled with just any CSS unit isn’t enough. For instance, relative units work better for responsiveness than absolute units. You might even think of min() as setting a maximum value in that it never goes below the first value but also caps itself at the second value.

I mentioned earlier that we could use any type of unit in min(). Let’s take the same approach that Chris did and lean heavily into a type of unit to see how min() behaves when it is used exclusively for a responsive layout. Specifically, we’ll use viewport units as they are directly relative to the size of the viewport.

Now, there are different flavors of viewport units. We can use the viewport’s width (vw) and height (vh). We also have the vmin and vmax units that are slightly more intelligent in that they evaluate an element’s width and height and apply either the smaller (vmin) or larger (vmax) of the two. So, if we declare 100vmax on an element, and that element is 500px wide by 250px tall, the unit computes to 500px.

That is how I am approaching this experiment. What happens if we eschew media queries in favor of only using min() to establish a responsive layout and lean into viewport units to make it happen? We’ll take it one piece at a time.

Font Sizing

There are various approaches for responsive type. Media queries are quickly becoming the “old school” way of doing it:

p { font-size: 1.1rem; }

@media (min-width: 1200px) {
  p { font-size: 1.2rem; }
}

@media (max-width: 350px) {
  p { font-size: 0.9rem; }
}

Sure, this works, but what happens when the user uses a 4K monitor? Or a foldable phone? There are other tried and true approaches; in fact, clamp() is the prevailing go-to. But we’re leaning all-in on min(). As it happens, just one line of code is all we need to wipe out all of those media queries, substantially reducing our code:

p { font-size: min(6vmin, calc(1rem + 0.23vmax)); }

I’ll walk you through those values…

1. 6vmin is essentially 6% of the browser’s width or height, whichever is smallest. This allows the font size to shrink as much as needed for smaller contexts.
2. For calc(1rem + 0.23vmax), 1rem is the base font size, and 0.23vmax is a tiny fraction of the viewport‘s width or height, whichever happens to be the largest.
3. The calc() function adds those two values together. Since 0.23vmax is evaluated differently depending on which viewport edge is the largest, it’s crucial when it comes to scaling the font size between the two arguments. I’ve tweaked it into something that scales gradually one way or the other rather than blowing things up as the viewport size increases.
4. Finally, the min() returns the smallest value suitable for the font size of the current screen size.

And speaking of how flexible the min() approach is, it can restrict how far the text grows. For example, we can cap this at a maximum font-size equal to 2rem as a third function parameter:

p { font-size: min(6vmin, calc(1rem + 0.23vmax), 2rem); }

This isn’t a silver bullet tactic. I’d say it’s probably best used for body text, like paragraphs. We might want to adjust things a smidge for headings, e.g., <h1>:

h1 { font-size: min(7.5vmin, calc(2rem + 1.2vmax)); }

We’ve bumped up the minimum size from 6vmin to 7.5vmin so that it stays larger than the body text at any viewport size. Also, in the calc(), the base size is now 2rem, which is smaller than the default UA styles for <h1>. We’re using 1.2vmax as the multiplier this time, meaning it grows more than the body text, which is multiplied by a smaller value, .023vmax.

This works for me. You can always tweak these values and see which works best for your use. Whatever the case, the font-size for this experiment is completely fluid and completely based on the min() function, adhering to my self-imposed constraint.

Margin And Padding 

Spacing is a big part of layout, responsive or not. We need margin and padding to properly situate elements alongside other elements and give them breathing room, both inside and outside their box.

We’re going all-in with min() for this, too. We could use absolute units, like pixels, but those aren’t exactly responsive.

min() can combine relative and absolute units so they are more effective. Let’s pair vmin with px this time:

div { margin: min(10vmin, 30px); }

10vmin is likely to be smaller than 30px when viewed on a small viewport. That’s why I’m allowing the margin to shrink dynamically this time around. As the viewport size increases, whereby 10vmin exceeds 30px, min() caps the value at 30px, going no higher than that.

Notice, too, that I didn’t reach for calc() this time. Margins don’t really need to grow indefinitely with screen size, as too much spacing between containers or elements generally looks awkward on larger screens. This concept also works extremely well for padding, but we don’t have to go there. Instead, it might be better to stick with a single unit, preferably em, since it is relative to the element’s font-size. We can essentially “pass” the work that min() is doing on the font-size to the margin and padding properties because of that.

.card-info {
  font-size: min(6vmin, calc(1rem + 0.12vmax));
  padding: 1.2em;
}

Now, padding scales with the font-size, which is powered by min().

Widths

Setting width for a responsive design doesn’t have to be complicated, right? We could simply use a single percentage or viewport unit value to specify how much available horizontal space we want to take up, and the element will adjust accordingly. Though, container query units could be a happy path outside of this experiment.

But we’re min() all the way!

min() comes in handy when setting constraints on how much an element responds to changes. We can set an upper limit of 650px and, if the computed width tries to go larger, have the element settle at a full width of 100%:

.container { width: min(100%, 650px); }

Things get interesting with text width. When the width of a text box is too long, it becomes uncomfortable to read through the texts. There are competing theories about how many characters per line of text is best for an optimal reading experience. For the sake of argument, let’s say that number should be between 50-75 characters. In other words, we ought to pack no more than 75 characters on a line, and we can do that with the ch unit, which is based on the 0 character’s size for whatever font is in use.

p {
  width: min(100%, 75ch);
}

This code basically says: get as wide as needed but never wider than 75 characters.

Sizing Recipes Based On min()

Over time, with a lot of tweaking and modifying of values, I have drafted a list of pre-defined values that I find work well for responsively styling different properties:

:root {
  --font-size-6x: min(7.5vmin, calc(2rem + 1.2vmax));
  --font-size-5x: min(6.5vmin, calc(1.1rem + 1.2vmax));
  --font-size-4x: min(4vmin, calc(0.8rem + 1.2vmax));
  --font-size-3x: min(6vmin, calc(1rem + 0.12vmax));
  --font-size-2x: min(4vmin, calc(0.85rem + 0.12vmax));
  --font-size-1x: min(2vmin, calc(0.65rem + 0.12vmax));
  --width-2x: min(100vw, 1300px);
  --width-1x: min(100%, 1200px);
  --gap-3x: min(5vmin, 1.5rem);
  --gap-2x: min(4.5vmin, 1rem);
  --size-10x: min(15vmin, 5.5rem);
  --size-9x: min(10vmin, 5rem);
  --size-8x: min(10vmin, 4rem);
  --size-7x: min(10vmin, 3rem);
  --size-6x: min(8.5vmin, 2.5rem);
  --size-5x: min(8vmin, 2rem);
  --size-4x: min(8vmin, 1.5rem);
  --size-3x: min(7vmin, 1rem);
  --size-2x: min(5vmin, 1rem);
  --size-1x: min(2.5vmin, 0.5rem);
}

This is how I approached my experiment because it helps me know what to reach for in a given situation:

h1 { font-size: var(--font-size-6x); }

.container {
  width: var(--width-2x);
  margin: var(--size-2x);
}

.card-grid { gap: var(--gap-3x); }

There we go! We have a heading that scales flawlessly, a container that’s responsive and never too wide, and a grid with dynamic spacing — all without a single media query. The --size- properties declared in the variable list are the most versatile, as they can be used for properties that require scaling, e.g., margins, paddings, and so on.

The Final Result, Again

I shared a video of the result, but here’s a link to the demo.

See the Pen min() website [forked] by Vayo.

So, is min() the be-all, end-all for responsiveness? Absolutely not. Neither is a diet consisting entirely of container query units. I mean, it’s cool that we can scale an entire webpage like this, but the web is never a one-size-fits-all beanie.

If anything, I think this and what Chris demoed are warnings against dogmatic approaches to web design as a whole, not solely unique to responsive design. CSS features, including length units and functions, are tools in a larger virtual toolshed. Rather than getting too cozy with one feature or technique, explore the shed because you might find a better tool for the job.