HTML email builder: vodič za alate, predloške i responzivni dizajn [2026]

Usporedite HTML email buildere prema editoru, predlošcima, responzivnom prikazu, testiranju, suradnji i integracijama s email platformama.

Ovaj lokalizirani uvod usklađuje članak s izvornim vodičem i postavlja kontekst za hrvatske čitatelje. Tema nije samo popis alata ili definicija pojmova. Važno je razumjeti kada nešto koristiti, kako procijeniti rizik, koje podatke mjeriti i kako odluku povezati s prihodima, korisničkim iskustvom i kapacitetom tima.

U praksi je najkorisnije krenuti od poslovnog cilja. Ako je cilj više prijava, prioritet su jasna ponuda, obrazac i brza potvrda. Ako je cilj bolja isporučivost, prioritet su autentikacija domene, higijena liste i reputacija pošiljatelja. Ako je cilj brža podrška, prioritet su kanali, usmjeravanje razgovora i kvalitetna baza znanja. Isti alat može biti odličan za jedan tim, a pretežak ili preskup za drugi.

Što ovaj vodič pokriva

Ovaj vodič objašnjava kako razmišljati o temi HTML email builder: vodič za alate, predloške i responzivni dizajn [2026] bez oslanjanja na površne usporedbe. Umjesto da gledate samo početnu cijenu ili najduži popis značajki, usporedite stvarne scenarije upotrebe, ograničenja plana, integracije, podatke koje alat može koristiti i vrijeme koje je potrebno da tim usvoji novi način rada.

Ključna pitanja za procjenu:

• Koji konkretan problem rješavate u sljedećih 30 do 90 dana?
• Koji kanal ili korisnički trenutak ima najveći utjecaj na rezultat?
• Koje podatke već imate i koliko su pouzdani?
• Tko će svakodnevno održavati kampanje, obrasce, automatizacije ili izvještaje?
• Kako ćete znati da je promjena uspjela?

Kako procijeniti opcije

Dobar izbor mora biti dovoljno jednostavan za svakodnevni rad, ali dovoljno snažan da podrži rast. Zato prvo dokumentirajte minimalne zahtjeve, a tek zatim dodatne mogućnosti. Minimalni zahtjevi obično uključuju pouzdano slanje ili prikupljanje podataka, jasnu analitiku, segmentaciju, integracije s CRM-om ili trgovinom, mogućnost testiranja i podršku za timove koji nisu tehnički.

Za usporedbe alata korisno je napraviti kratku tablicu s pet stupaca: primarni slučaj upotrebe, prednosti, ograničenja, cijena pri vašem stvarnom obujmu i napor implementacije. Takva tablica brzo pokaže razliku između alata koji dobro izgleda u demo prikazu i alata koji će tim stvarno koristiti svaki tjedan.

Operativni koraci

Prvo odaberite jedan scenarij s jasnim rezultatom. To može biti welcome sekvenca, obrazac za prikupljanje leadova, automatizacija nakon kupnje, provjera email liste, live chat na stranici s cijenama ili izvještaj koji povezuje kampanje s prihodom. Zatim postavite početnu verziju, provjerite poruke, mjerne oznake i pravila izuzimanja, pa tek onda širite na dodatne segmente.

Posebno pazite na kvalitetu podataka. Loše označeni kontakti, duplicirani zapisi, zastarjele liste i nejasne dozvole mogu pokvariti i najbolju strategiju. Prije većih kampanja provjerite izvore podataka, pravila privole, mapiranje polja i način na koji se rezultati vraćaju u CRM ili analitiku.

Kontrolna lista prije odluke

• Cilj je zapisan jednom rečenicom i povezan s metrikom.
• Segmenti su jasni i ne preklapaju se nepotrebno.
• Poruke su prilagođene trenutku korisnika, a ne samo internom kalendaru.
• Postoje pravila za izuzimanje korisnika koji su već kupili, odjavili se ili otvorili zahtjev za podršku.
• Testiranje je dovoljno jednostavno da se rezultat može protumačiti.
• Izvještavanje pokazuje klikove, konverzije, prihod ili uštedu vremena, a ne samo aktivnost.
• Tim zna tko održava sadržaj, tko prati rezultate i tko odobrava promjene.

Sljedeći koraci

Najbolji rezultat dolazi iz malih, dobro izmjerenih poboljšanja. Pokrenite osnovnu verziju, provjerite isporuku i podatke, usporedite rezultat s početnim stanjem i zatim dodajte složenije grananje, personalizaciju ili dodatne kanale. Tako zadržavate kontrolu, smanjujete rizik i gradite sustav koji se može ponavljati.

Essential Features to Look For

When evaluating HTML email builders, prioritize these features based on your needs.

Drag-and-Drop Editor

The core of any email builder is its visual editor. Look for:

• Intuitive controls: Components should be easy to find and place
• Precise positioning: Ability to fine-tune spacing and alignment
• Undo/redo: Essential for experimentation
• Copy/paste: Between emails and across campaigns
• Keyboard shortcuts: Speed up repetitive tasks

Template Library

Quality templates save hours of design work:

• Industry-specific templates: Match your business type
• Purpose-built designs: Welcome emails, newsletters, promotions, transactional
• Regular updates: Fresh designs added consistently
• Customization flexibility: Easy to modify without breaking design

Mobile Responsiveness

With over 60% of emails opened on mobile, responsive design is critical:

• Automatic adaptation: Designs should adjust without manual work
• Mobile preview: See exactly how emails appear on phones
• Mobile-specific settings: Different padding, font sizes for mobile
• Touch-friendly buttons: Appropriately sized CTAs for tap targets

Personalization Capabilities

Modern email marketing requires personalization:

• Merge tags: Insert contact data (name, company, etc.)
• Dynamic content: Show different content to different segments
• Product blocks: Pull products from your catalog
• Conditional logic: If/then rules for content display

Code Access

Even with visual builders, code access matters:

• Custom HTML blocks: Insert code when needed
• Export clean HTML: Download email code for use elsewhere
• Code view: See and edit generated HTML
• CSS support: Add custom styling when necessary

Testing and Preview

Before sending, you need confidence your email looks right:

• Multi-client preview: See rendering across Gmail, Outlook, Apple Mail
• Spam score checking: Catch issues before they affect deliverability
• Link validation: Ensure all links work
• Accessibility checking: Verify screen reader compatibility

Collaboration Features

For teams, collaboration capabilities matter:

• Role-based access: Control who can edit vs. view
• Comments and feedback: Annotate designs directly
• Approval workflows: Ensure emails meet standards before sending
• Version history: Track changes and restore previous versions

---

HTML Email Builder Comparison

This comparison helps you match your needs to the right tool.

Feature Comparison Table

Builder	Best For	Template Quality	Personalization	Code Access	Starting Price
Brevo	E-commerce	Excellent	Advanced	Yes	Free
Mailchimp	Beginners	Good	Basic	Limited	Free
Klaviyo	E-commerce	Excellent	Advanced	Yes	Free
HubSpot	B2B	Good	Advanced	Yes	Free
Litmus	Developers	N/A	Basic	Full	$99/mo
Stripo	Designers	Excellent	Moderate	Yes	Free
Beefree	Agencies	Good	Moderate	Yes	Free
Chamaileon	Enterprise	Good	Moderate	Yes	$40/mo
Postcards	Aesthetics	Excellent	Basic	Limited	Free
Topol.io	Simplicity	Good	Basic	Yes	Free

Use Case Recommendations

For E-commerce Businesses:

1. Brevo (best overall value with multi-channel)
2. Klaviyo (strongest e-commerce personalization)
3. Mailchimp (good starting point)

For B2B and SaaS:

1. HubSpot (CRM integration)
2. Brevo (cost-effective alternative)
3. Mailchimp (simple campaigns)

For Agencies and Freelancers:

1. Beefree (multi-client flexibility)
2. Stripo (advanced design features)
3. Litmus (developer focus)

For Enterprise Teams:

1. Chamaileon (collaboration and governance)
2. HubSpot Enterprise (full marketing suite)
3. Litmus (testing and quality control)

For Design-Focused Teams:

1. Stripo (most design features)
2. Postcards (cleanest aesthetic output)
3. Beefree (good balance of design and usability)

---

Najbolje prakse for Using HTML Email Builders

Follow these guidelines to create effective emails.

Design Principles

Keep It Simple:

• Single-column layouts work best for mobile
• Limit to 2-3 fonts maximum
• Use consistent spacing throughout
• Maintain clear visual hierarchy

Optimize for Readability:

• Use 14-16px font size minimum
• Keep line length to 600px maximum
• Use sufficient contrast (4.5:1 minimum)
• Break up text with headers and images

Make CTAs Stand Out:

• Use buttons, not text links
• Make buttons at least 44x44px for mobile
• Use contrasting colors
• Keep CTA text action-oriented

Technical Considerations

Image Handling:

• Host images on reliable servers
• Specify width and height attributes
• Keep total email size under 100KB for images
• Use alt text for all images

Testing Protocol:

• Test in top 10 email clients before sending
• Check on iOS Mail, Gmail app, Outlook desktop
• Verify links work correctly
• Review plain-text version

Deliverability Factors:

• Maintain balanced text-to-image ratio (60/40)
• Avoid spam trigger words
• Keep subject lines under 50 characters
• Use authenticated sending domains

Content Strategy

Above the Fold:

• Place most important content at top
• Include primary CTA visible without scrolling
• Use preheader text effectively
• Make value proposition clear immediately

Personalization Approach:

• Start with name personalization
• Progress to behavior-based content
• Use dynamic product recommendations
• Implement conditional content for segments

---

How Brevo Compares to Competitors

Brevo deserves deeper examination as a leading choice for businesses.

Brevo vs. Mailchimp

Aspect	Brevo	Mailchimp
Free plan	300 emails/day	500 contacts
Pricing model	By emails sent	By contacts
SMS marketing	Included	Separate product
Email builder	More blocks/features	Simpler interface
Automation	Advanced workflows	Good but limited on lower tiers
E-commerce	Strong integration	Good integration

When to Choose Brevo: You need more email sends, want SMS/WhatsApp included, prefer paying for what you send rather than contact count.

When to Choose Mailchimp: You’re a beginner wanting the simplest possible interface, or already invested in Mailchimp ecosystem.

Brevo vs. Klaviyo

Aspect	Brevo	Klaviyo
Pricing	More affordable	Higher, scales with contacts
E-commerce focus	Strong	Specialized
Multi-channel	Email, SMS, WhatsApp, Push	Email, SMS
AI features	Good	Advanced
Analytics	Comprehensive	Deep e-commerce analytics
Learning curve	Moderate	Steeper

When to Choose Brevo: Budget is a concern, you want multi-channel marketing, or you prefer a more general-purpose platform.

When to Choose Klaviyo: E-commerce is your only focus, you want the deepest product recommendations, price is not the primary consideration.

Brevo’s Unique Strengths

Multi-Channel in One Platform: Brevo combines email, SMS, WhatsApp, and push notifications in a single platform with unified contact management. This simplifies campaign orchestration and reduces tool sprawl.

Cost-Effective Pricing: Brevo charges based on email volume rather than contact count. For businesses with large lists but moderate email frequency, this results in significant savings.

Transactional Email: Brevo handles both marketing and transactional emails, with dedicated infrastructure for order confirmations, password resets, and other triggered messages.

---

Integrating HTML Email Builders with Your Marketing Stack

Email builders do not exist in isolation. Integration with your broader marketing technology matters.

E-commerce Platform Integration

For e-commerce, your email builder should connect with:

• Product catalog: Automatically pull product information
• Order data: Trigger post-purchase emails
• Customer behavior: Track browsing and purchase history
• Inventory: Show real-time availability

Brevo + Shopify Example:

With Brevo’s Shopify integration (enhanced through Tajo), you can:

• Sync all customer data automatically
• Pull product information into emails
• Track order history for segmentation
• Trigger abandoned cart emails
• Send post-purchase flows

CRM Integration

For B2B and relationship-driven businesses:

• Contact synchronization: Keep lists updated automatically
• Activity tracking: Log email engagement in CRM
• Deal integration: Trigger emails based on pipeline stage
• Lead scoring: Factor email engagement into scores

Analytics Integration

Connect email performance to broader business metrics:

• Google Analytics: Track website behavior from email clicks
• Revenue attribution: Connect email campaigns to sales
• Customer journey: See email’s role in conversion paths

---

Building Emails with Tajo and Brevo

Tajo enhances Brevo’s email capabilities for Shopify merchants by providing deeper data integration.

What Tajo Adds

Complete Customer Data Sync:

• All Shopify customer data in Brevo
• Order history for personalization
• Browse behavior for targeting
• Loyalty program data

Enhanced Personalization:

• Product recommendations based on purchase history
• Dynamic content from loyalty tier
• Segment-based messaging
• Behavioral triggers

Multi-Channel Coordination:

• Email and SMS in coordinated flows
• WhatsApp for conversational marketing
• Consistent messaging across channels

Workflow Example: Welcome Series with Product Recommendations

Email 1: Welcome (Immediate)

• Pull subscriber’s first name
• Show best-selling products from browsed categories
• Include welcome discount

Email 2: Brand Story (Day 2)

• Dynamic content based on traffic source
• Product categories matching entry interests

Email 3: Social Proof (Day 4)

• Reviews for products in their interest categories
• Customer photos from similar buyers

Email 4: Personalized Recommendations (Day 6)

• Products matching browse history
• “Customers like you also bought”
• Discount reminder with countdown

This level of personalization requires the customer data synchronization that Tajo provides to Brevo.

---

Common HTML Email Builder Mistakes to Avoid

Learn from common errors to create better emails.

Design Mistakes

Overcomplicating Layouts:

• Problem: Complex multi-column layouts break on mobile
• Solution: Use single-column or simple two-column layouts

Ignoring Image Weight:

• Problem: Large images slow load times and may not display
• Solution: Compress images, keep total under 500KB

Font Inconsistency:

• Problem: Custom fonts do not render in all clients
• Solution: Use web-safe fonts or accept fallbacks gracefully

Insufficient Contrast:

• Problem: Light text on light backgrounds fails accessibility
• Solution: Test contrast ratios, aim for 4.5:1 minimum

Technical Mistakes

Not Testing Across Clients:

• Problem: Email looks broken in Outlook
• Solution: Test in top 10 email clients minimum

Missing Alt Text:

• Problem: Broken experience when images do not load
• Solution: Add descriptive alt text to every image

Broken Links:

• Problem: CTAs lead to 404 pages
• Solution: Test every link before sending

Missing Plain-Text Version:

• Problem: Some recipients see nothing
• Solution: Always include plain-text alternative

Strategy Mistakes

No Clear CTA:

• Problem: Recipients do not know what action to take
• Solution: Single, prominent CTA per email

Too Much Content:

• Problem: Overwhelming emails get ignored
• Solution: Focus on one message per email

Ignoring Mobile:

• Problem: 60% of opens are mobile, but design is desktop-first
• Solution: Design mobile-first, test on devices

---

Frequently Asked Questions

Što je the best free HTML email builder?

Brevo offers the best free HTML email builder for most users. The free plan includes the full drag-and-drop editor with all content blocks, 70+ templates, and sending up to 300 emails per day. Unlike Mailchimp, which limits features on free plans, Brevo provides the complete builder experience without cost.

For standalone builders without sending capability, Stripo offers a generous free tier with template access and basic design features.

Do I need to know HTML to use an email builder?

No. Modern email builders are designed for non-technical users. The drag-and-drop interface handles all code generation automatically. You simply place elements, adjust styling through visual controls, and the builder creates clean, cross-client compatible HTML.

However, knowing basic HTML can be helpful for troubleshooting issues or adding custom elements that builders do not support natively.

Which HTML email builder works best with Shopify?

Brevo (especially when enhanced with Tajo) and Klaviyo are the top choices for Shopify stores. Both offer native Shopify integrations that sync customer data, products, and orders.

Brevo with Tajo provides the most cost-effective solution with multi-channel capabilities (email, SMS, WhatsApp). Klaviyo offers deeper e-commerce analytics but at higher cost.

How do I ensure my HTML emails display correctly in Outlook?

Outlook uses Microsoft Word’s rendering engine, which handles HTML differently than web-based clients. To ensure compatibility:

1. Use table-based layouts (most builders do this automatically)
2. Avoid CSS properties Outlook ignores (background images, rounded corners)
3. Test specifically in Outlook desktop (not just Outlook.com)
4. Use tools like Litmus for comprehensive testing

Quality email builders like Brevo generate Outlook-compatible code by default.

Što je the difference between an email builder and an email service provider?

An email builder is a design tool for creating email HTML. An email service provider (ESP) is a platform for sending emails, managing lists, and tracking performance.

Some platforms (Brevo, Mailchimp, Klaviyo) combine both, offering built-in email builders. Others (Stripo, Beefree, Litmus Builder) are standalone builders that export to separate ESPs.

For most businesses, an integrated platform is simpler. Agencies or teams with specialized needs might prefer dedicated builders.

How important is mobile responsiveness in email design?

Critical. Over 60% of email opens occur on mobile devices. Emails that do not display well on mobile see significantly lower engagement.

All modern email builders create responsive emails by default. The key is testing on actual mobile devices (not just preview modes) and designing with mobile as the primary viewing context.

Can I import my own HTML into an email builder?

Most email builders allow HTML imports, though support varies:

• Brevo: Yes, paste custom HTML or upload files
• Mailchimp: Yes, code your own or paste HTML
• Stripo: Yes, import and edit existing HTML
• Litmus: Designed for code editing from the start

This is useful when migrating from another platform or working with templates from external designers.

What email size limits should I follow?

Keep your emails under these thresholds:

• Total file size: Under 100KB (ideally under 50KB)
• Image weight: Under 500KB total
• Width: 600px maximum for desktop
• Length: What’s visible in 10-15 seconds of scrolling

Gmail clips emails over 102KB, which can hide important content and CTAs.

How do I create AMP emails?

AMP emails include interactive elements (carousels, accordions, live content). Support is limited to Gmail, Yahoo Mail, and Mail.ru.

Stripo offers the most accessible AMP email creation for non-developers. You design interactive elements visually and Stripo generates the AMP code.

For most businesses, standard HTML emails are sufficient. Consider AMP only if you have specific interactive requirements and your audience primarily uses Gmail.

How often should I update my email templates?

Review and refresh templates quarterly at minimum. Update when:

• Brand guidelines change
• Seasonal themes apply
• A/B tests reveal improvement opportunities
• Email clients update rendering (rare but happens)
• Performance metrics decline

Maintaining a template library with regular updates ensures your emails stay fresh and effective.

---

Zaključak

HTML email builders have transformed email marketing from a technical challenge to an accessible creative process. The right builder depends on your specific needs: business size, technical capabilities, budget, and marketing strategy.

For most businesses, Brevo offers the best combination of powerful building capabilities, affordable pricing, and comprehensive marketing features. Its drag-and-drop editor handles everything from simple newsletters to complex personalized campaigns.

E-commerce businesses benefit particularly from platforms that integrate deeply with their store data. Brevo enhanced with Tajo provides Shopify merchants with the data synchronization needed for truly personalized email marketing across email, SMS, and WhatsApp.

Whatever builder you choose, remember that the tool is only as good as the strategy behind it. Focus on creating valuable content, testing across email clients, and continuously optimizing based on results.

Ready to create professional HTML emails for your e-commerce business? Start with Tajo to connect your Shopify store with Brevo’s powerful email builder and unlock advanced personalization across all channels.