Archive

Archive for the ‘Others’ Category

Top Five Survey Software in 2025

January 28th, 2025 No comments

Whether you are doing large-scale market research or just a simple registration form, you will need surveys to gather all-important information and feedback. These days, there are plenty of tools available that can help you efficiently collect all this data, making the process much easier. How to choose the right one is the question that we will answer today.

A great survey tool should be easy to use, mobile-friendly, secure, and offer real-time analytics, and integration with other tools. Let’s see how many of the most popular survey tools match these expectations: 

Jotform

Considered the leading no-code form builder in the market, Jotform is a comprehensive and user-friendly survey software that has been empowering individuals and organizations for almost two decades. Jotform makes creating forms and surveys simple, no matter your level of expertise. With its drag-and-drop interface, you can build custom surveys in minutes – no coding required. And if you’re in need of inspiration, Jotform offers over 10,000 customizable templates for various industries, from customer service, healthcare, and education to small businesses.

What sets Jotform apart; however, is its adaptability and focus on innovation. The AI survey generator helps you create tailored surveys with just a few clicks, saving time and effort. And if you’re working on the go, the Jotform mobile app lets you collect data offline, making it perfect for fieldwork or remote environments. Plus, with top-tier security features like PCI DSS, GDPR, and HIPAA compliance, you can trust that your data – and your users’ – is in safe hands. In fact, Jotform is certified at Provider Level I, indicating they have achieved the highest security standards under PCI regulations. It is safe to say that Jotform is built to simplify your workflow and help you achieve more.

Pros:

  • Feature-rich drag-and-drop builder with a rich template library and widget options.
  • High level security and compliance for sensitive data.
  • Offline data collection using mobile-friendly forms with kiosk mode.
  • Seamless integrations with tools like Slack, Google Drive, and CRMs like Salesforce and Hubspot, and multiple payment gateways including PayPal, Stripe, and Square.

Process payments automatically

Details

Google Drive lets you store important files and access them anywhere — whether at home or on the go! Use this free integration to automatically send form responses and file uploads directly to your Google Drive folder, with no manual data entry necessary.

Learn More
Integrate with Google Drive

  • Logic-based workflows for smooth data collection, approval processes, and team collaboration. 
  • Advanced data management with Jotform Tables, real-time analytics and export options for Excel or CSV.
  • Surveys in multiple languages and multilingual support.
  • Supports features like e-signatures, payments, and conditional logic.

Cons:

  • Free plan includes branding, which may not suit all users.
  • Advanced features like HIPAA compliance are only available on higher-tier plans.

FormAssembly

form-assembly-homepage

FormAssembly is another data collection platform, recognized for its Salesforce integration and security features. It mainly serves industries like higher education, healthcare, and finance. The platform offers dynamic forms with conditional logic, making it easy for users to create intuitive forms. It also has advanced workflows that automate data processing, which helps reduce manual work and improve efficiency. FormAssembly complies with standards like GDPR, HIPAA, and PCI DSS. On top of that, it provides built-in analytics and reporting tools, so users can track how their forms are performing and adjust their strategies for better results.

Pros

  • Focus on security and compliance.
  • Integration with Salesforce enhances operational efficiency.
  • Dynamic forms and conditional logic improve user experience and data quality.
  • Comprehensive analytics help optimize data collection and boost conversions.

Cons

  • Pricing may be prohibitive for small businesses or organizations with simpler needs.
  • Slightly steeper learning curve for people who are new to form-building.
  • Limited features for those seeking simple form-building or survey-making capabilities.

Typeform

typeform-homepage

Typeform is a survey and form-building platform known for its one-question-at-a-time format. It offers customizable templates with an emphasis on aesthetics. The platform focuses on simplicity and user-friendliness, providing a straightforward experience for both creators and respondents. Typeform is ideal for businesses, marketers, and educators looking to capture information in a more human-centric way. Their advanced logic branching feature allows users to create personalized question paths based on respondents’ previous answers. This tool also integrates with platforms like Slack, Hubspot, and Mailchimp. On top of that, Typeform includes AI-powered survey creation, so users are able to generate forms quickly.

Pros:

  • User-friendly design boosts response rates.
  • Customization options for branding and media-rich surveys.
  • AI-powered tools save time during survey creation.
  • Integrates with popular apps for workflow automation.
  • Ideal for design-focused businesses seeking polished forms.

Cons:

  • Limited advanced features for managing complex survey workflows.
  • Pricing scales quickly with increased response limits.
  • Free plan offers limited responses and features.

AskNicely

asknicely-homepage

AskNicely is a customer experience management platform helping businesses collect and act on real-time feedback. It is built around the Net Promoter Score (NPS) framework and specializes in using simple, automated surveys to evaluate customer loyalty and satisfaction.  The platform helps businesses spot trends, address issues, and enhance the overall customer experience. It does this by collecting feedback right after customer interactions, whether through email, SMS, or the web.  AskNicely integrates with tools like Mailchimp, Microsoft Teams, and HubSpot. This connectivity ensures that feedback data is centralized and actionable. Additionally, teams resolve issues efficiently with the automated follow-up workflow feature of AskNicely.

Pros

  • Measuring and improving customer loyalty through NPS.
  • Automates feedback collection and follow-up actions, saving time and effort.
  • Integrates with popular CRM and workflow tools.
  • Simple, user-friendly interface with actionable insights.

Cons

  • Primarily focused on NPS.
  • Integration processes may require additional effort.
  • Lack of control over individual responses

Formstack

formstack-homepage

Another platform we’d like to mention is Formstack. With this tool, users can create custom forms and automate workflows. This tool also has a drag-and-drop interface similar to the rest of the tools on this list, and it helps users to quickly build forms, surveys, and workflows. With over 350 templates available on its website and integrations with popular tools such as Salesforce, HubSpot, and Google Workspace, Formstack simplifies data collection and task automation. Its workflow automation further helps users save time by streamlining tasks like approvals, document creation, and email notifications.

Pros

  • Workflow automation simplifies complex processes.
  • Integrations with popular CRM and productivity tools.
  • A template library tailored to various business needs.
  • User-friendly interface with customization options.

Cons

  • Pricing may be prohibitive for small businesses or individual users.
  • Some integrations or workflows may require additional setup effort.

Conclusion

Well, there you have it! These five survey tools each bring something unique to the table. The right choice ultimately depends on your specific needs, like budget, features, and the kind of data you want to collect. So, take a closer look at what matters most to you and pick the tool that fits your workflow best.

The post Top Five Survey Software in 2025 appeared first on noupe.

Categories: Others Tags:

What Are The Marketing Strategies To Generate Leads

January 28th, 2025 No comments

Every business wants to convert a curious browsing audience into loyal customers. This is why 6 out of 10 marketers adopt lead generation as their prime method, according to Hubspot.

In this article, we’ll walk through practical marketing strategies—both digital and offline—designed to connect you with your audience and drive growth. 

From tried-and-true methods like email marketing to creative ideas like hosting webinars, this guide is packed with actionable insights to boost your lead generation efforts.

we will touch upon how these strategies play a pivotal role in B2B marketing, ensuring businesses can capture and nurture high-quality leads effectively.

What is Lead Generation

Lead generation is the process of identifying and attracting people who are likely to be interested in your product or service. These potential customers, known as leads, provide their contact information in exchange for valuable content or services, such as a free guide, consultation, or demo.

The goal is to nurture these leads until they are ready to make a purchase.

Why does lead generation strategy matter

Without a clear strategy, businesses risk wasting time and resources on ineffective tactics. A well-defined lead generation plan helps you focus on the right audience, choose effective channels, and measure results. It ensures you have a steady flow of potential customers, which is essential for growth and revenue.

Marketing Strategies To Generate Leads

There are countless ways to generate leads, but they generally fall into two categories: online and offline strategies. Each approach has its own benefits, depending on your target audience and business goals. Below, we’ll cover the most effective digital and offline methods.

5 Digital Marketing Strategies That Work

With the rise of the internet, digital marketing has become the backbone of lead generation. Some of its options include SEO, PPC advertising, content marketing, social media marketing, and email marketing.

Digital marketing offers you many opportunities to connect with your target audience. Let’s dive in deep.

1. Search engine optimization (SEO)

SEO is a long-term strategy that helps your website rank higher on search engines like Google. By optimizing your website with relevant keywords, quality content, and proper technical setup, you can attract organic traffic. The more visible your site is, the more leads you can generate.

2. Pay-per-click (PPC) advertising

PPC advertising involves placing ads on search engines or social media platforms and paying for each click. This method allows you to target specific demographics and keywords, ensuring your ads reach the right audience. Google Ads and Facebook Ads are popular platforms for PPC campaigns. In B2B marketing, LinkedIn Ads offer tailored solutions for reaching professionals and decision-makers.

3. Content Marketing

Content marketing focuses on creating valuable and informative content to attract and engage your target audience. Blog posts, videos, infographics, and eBooks are examples of content that can drive traffic and encourage lead conversions. Sharing helpful content builds trust and positions your business as an authority in your industry.

4. Social Media Marketing

Social media platforms like LinkedIn, Facebook, Instagram, and Twitter offer excellent opportunities to connect with potential leads. By sharing engaging posts, running targeted ads, and participating in conversations, you can attract and nurture leads.

5. Email Marketing

Email marketing remains one of the most effective ways to generate leads. Sending personalized emails with valuable content, special offers, or updates helps you stay connected with your audience. Building a strong email list is key to the success of this strategy.

4 Offline Strategies For You

1. Direct Mail Marketing

Sending postcards, flyers, or catalogs directly to potential customers is a tried-and-true method. While often overlooked in today’s digital age, direct mail can be highly effective when targeting a specific audience.

2. Referral Programs and Loyalty Awards

Encouraging your current customers to refer others is a cost-effective way to generate leads. Offering incentives like discounts or rewards motivates customers to spread the word about your business.

3. Partnerships and Collaborations

Partnering with complementary businesses can expand your reach and attract new leads. For example, a gym might collaborate with a nutritionist to offer joint promotions.

4. Webinars and Workshops

Hosting events like webinars or in-person workshops allows you to share your expertise and connect with potential leads. These events also provide an opportunity to collect contact information for future follow-ups. Webinars, in particular, are a popular choice in B2B marketing to demonstrate thought leadership and engage with professionals.

4L Marketing Strategy

1. Lead Captures

Lead captures involve collecting contact information from potential customers through forms, pop-ups, or signup pages. Offering something valuable, like a free resource, encourages people to provide their details.

2. Lead Magnets

A lead magnet is a free offer designed to attract leads. Examples include eBooks, checklists, free trials, or exclusive discounts. Make sure your lead magnet solves a specific problem or provides value.

3. Landing Pages

A landing page is a standalone web page designed to capture leads. It should have a clear call-to-action (CTA), an engaging headline, and a form for visitors to fill out. Simplifying the process makes it easier for people to sign up.

4. Lead Scoring

Lead scoring helps prioritize your leads by assigning a value based on their level of interest and engagement. This allows your sales team to focus on the most promising leads first.

Bonus: Lead Generation Ideas Checklist for Marketing Strategies

Sometimes you can feel overwhelmed when making funnels. You lose and forget some of the steps making your lead generation ineffective. That’s why we brought you a checklist as a bonus! 

  • Offer gated content like eBooks or whitepapers in exchange for contact information.
  • Host webinars or virtual events to engage your audience and capture leads.
  • Build targeted email campaigns to nurture prospects with relevant content.
  • Use social media ads on platforms like LinkedIn and Facebook to collect leads.
  • Create interactive quizzes or surveys to engage users and qualify leads.
  • Develop a referral program to encourage word-of-mouth recommendations.
  • Optimize your website with lead forms, strong CTAs, and exit-intent pop-ups.
  • Invest in SEO and content marketing to attract organic traffic.
  • Provide free trials or demos to showcase your product or service.
  • Run contests or giveaways to capture contact information from participants.
  • Partner with influencers or industry leaders for guest blogging or podcasts.
  • Use LinkedIn for direct outreach to decision-makers and prospects.
  • Run Google Ads targeting high-intent keywords to generate leads.
  • Implement retargeting ads to engage visitors who didn’t convert initially.
  • Collaborate with influencers to promote your offerings.

For businesses looking to simplify their approach, partnering with professional lead generation services B2B can streamline these processes and improve results.

Conclusion

From search engine optimization to in-person workshops, the path to effective lead generation is rich with opportunities. Each strategy highlighted here offers a unique way to connect with potential customers. Whether you focus on digital channels like PPC ads or offline efforts such as direct mail, the key is to remain consistent and adaptable. By blending creativity with data-driven decision-making, you can create a lead generation plan that keeps your sales pipeline full and your business thriving.

Featured image by Mark Fletcher-Brown on Unsplash

The post What Are The Marketing Strategies To Generate Leads appeared first on noupe.

Categories: Others Tags:

Revisiting CSS Multi-Column Layout

January 27th, 2025 No comments

Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module.

Hint: I published an updated version, Transcending CSS Revisited, which is free to read online.

Perhaps because, before the web, I’d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I’ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?

Holes in the specification

For a long time, there were, and still are, plenty of holes in Multi-Column Layout. As Rachel Andrew — now a specification editor — noted in her article five years ago:

“The column boxes created when you use one of the column properties can’t be targeted. You can’t address them with JavaScript, nor can you style an individual box to give it a background colour or adjust the padding and margins. All of the column boxes will be the same size. The only thing you can do is add a rule between columns.”

She’s right. And that’s still true. You can’t style columns, for example, by alternating background colours using some sort of :nth-column() pseudo-class selector. You can add a column-rule between columns using border-style values like dashed, dotted, and solid, and who can forget those evergreen groove and ridge styles? But you can’t apply border-image values to a column-rule, which seems odd as they were introduced at roughly the same time. The Multi-Column Layout is imperfect, and there’s plenty I wish it could do in the future, but that doesn’t explain why most people ignore what it can do today.

Patchy browser implementation for a long time

Legacy browsers simply ignored the column properties they couldn’t process. But, when Multi-Column Layout was first launched, most designers and developers had yet to accept that websites needn’t look the same in every browser.

Early on, support for Multi-Column Layout was patchy. However, browsers caught up over time, and although there are still discrepancies — especially in controlling content breaks — Multi-Column Layout has now been implemented widely. Yet, for some reason, many designers and developers I speak to feel that CSS Columns remain broken. Yes, there’s plenty that browser makers should do to improve their implementations, but that shouldn’t prevent people from using the solid parts today.

Readability and usability with scrolling

Maybe the main reason designers and developers haven’t embraced Multi-Column Layout as they have CSS Grid and Flexbox isn’t in the specification or its implementation but in its usability. Rachel pointed this out in her article:

“One reason we don’t see multicol used much on the web is that it would be very easy to end up with a reading experience which made the reader scroll in the block dimension. That would mean scrolling up and down vertically for those of us using English or another vertical writing mode. This is not a good reading experience!”

That’s true. No one would enjoy repeatedly scrolling up and down to read a long passage of content set in columns. She went on:

“Neither of these things is ideal, and using multicol on the web is something we need to think about very carefully in terms of the amount of content we might be aiming to flow into our columns.”

But, let’s face it, thinking very carefully is what designers and developers should always be doing.

Sure, if you’re dumb enough to dump a large amount of content into columns without thinking about its design, you’ll end up serving readers a poor experience. But why would you do that when headlines, images, and quotes can span columns and reset the column flow, instantly improving readability? Add to that container queries and newer unit values for text sizing, and there really isn’t a reason to avoid using Multi-Column Layout any longer.

A brief refresher on properties and values

Let’s run through a refresher. There are two ways to flow content into multiple columns; first, by defining the number of columns you need using the column-count property:

CodePen Embed Fallback

Second, and often best, is specifying the column width, leaving a browser to decide how many columns will fit along the inline axis. For example, I’m using column-width to specify that my columns are over 18rem. A browser creates as many 18rem columns as possible to fit and then shares any remaining space between them.

CodePen Embed Fallback

Then, there is the gutter (or column-gap) between columns, which you can specify using any length unit. I prefer using rem units to maintain the gutters’ relationship to the text size, but if your gutters need to be 1em, you can leave this out, as that’s a browser’s default gap.

CodePen Embed Fallback

The final column property is that divider (or column-rule) to the gutters, which adds visual separation between columns. Again, you can set a thickness and use border-style values like dashed, dotted, and solid.

CodePen Embed Fallback

These examples will be seen whenever you encounter a Multi-Column Layout tutorial, including CSS-Tricks’ own Almanac. The Multi-Column Layout syntax is one of the simplest in the suite of CSS layout tools, which is another reason why there are few reasons not to use it.

Multi-Column Layout is even more relevant today

When I wrote Transcending CSS and first explained the emerging Multi-Column Layout, there were no rem or viewport units, no :has() or other advanced selectors, no container queries, and no routine use of media queries because responsive design hadn’t been invented.

We didn’t have calc() or clamp() for adjusting text sizes, and there was no CSS Grid or Flexible Box Layout for precise control over a layout. Now we do, and all these properties help to make Multi-Column Layout even more relevant today.

Now, you can use rem or viewport units combined with calc() and clamp() to adapt the text size inside CSS Columns. You can use :has() to specify when columns are created, depending on the type of content they contain. Or you might use container queries to implement several columns only when a container is large enough to display them. Of course, you can also combine a Multi-Column Layout with CSS Grid or Flexible Box Layout for even more imaginative layout designs.

Using Multi-Column Layout today

Patty Meltt is an up-and-coming country music sensation. She’s not real, but the challenges of designing and developing websites like hers are.

My challenge was to implement a flexible article layout without media queries which adapts not only to screen size but also whether or not a

is present. To improve the readability of running text in what would potentially be too-long lines, it should be set in columns to narrow the measure. And, as a final touch, the text size should adapt to the width of the container, not the viewport.

A two-column layout of text topped with a large heading that spans both columns.
Article with no

element. What would potentially be too-long lines of text are set in columns to improve readability by narrowing the measure.
To column layout with text on the left and a large image on the right.
Article containing a

element. No column text is needed for this narrower measure.

The HTML for this layout is rudimentary. One

, one
, and one

(or not:)

<section>
  <main>
    <h1>About Patty</h1>
    <p>…</p>
  </main>

  <figure>
    <img>
  </figure>
</section>

I started by adding Multi-Column Layout styles to the

element using the column-width property to set the width of each column to 40ch (characters). The max-width and automatic inline margins reduce the content width and center it in the viewport:

main {
  margin-inline: auto;
  max-width: 100ch;
  column-width: 40ch;
  column-gap: 3rem;
  column-rule: .5px solid #98838F;
}

Next, I applied a flexible box layout to the

only if it :has() a direct descendant which is a

:

section:has(> figure) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 3rem;
}

This next min-width: min(100%, 30rem) — applied to both the

and

— is a combination of the min-width property and the min() CSS function. The min() function allows you to specify two or more values, and a browser will choose the smallest value from them. This is incredibly useful for responsive layouts where you want to control the size of an element based on different conditions:

section:has(> figure) main {
  flex: 1;
  margin-inline: 0;
  min-width: min(100%, 30rem);
}

section:has(> figure) figure {
  flex: 4;
  min-width: min(100%, 30rem);
}

What’s efficient about this implementation is that Multi-Column Layout styles are applied throughout, with no need for media queries to switch them on or off.

Adjusting text size in relation to column width helps improve readability. This has only recently become easy to implement with the introduction of container queries, their associated values including cqi, cqw, cqmin, and cqmax. And the clamp() function. Fortunately, you don’t have to work out these text sizes manually as ClearLeft’s Utopia will do the job for you.

My headlines and paragraph sizes are clamped to their minimum and maximum rem sizes and between them text is fluid depending on their container’s inline size:

h1 { font-size: clamp(5.6526rem, 5.4068rem + 1.2288cqi, 6.3592rem); }

h2 { font-size: clamp(1.9994rem, 1.9125rem + 0.4347cqi, 2.2493rem); }

p { font-size: clamp(1rem, 0.9565rem + 0.2174cqi, 1.125rem); }

So, to specify the

as the container on which those text sizes are based, I applied a container query for its inline size:

main {
  container-type: inline-size;
}

Open the final result in a desktop browser, when you’re in front of one. It’s a flexible article layout without media queries which adapts to screen size and the presence of a

. Multi-Column Layout sets text in columns to narrow the measure and the text size adapts to the width of its container, not the viewport.

CodePen Embed Fallback

Modern CSS is solving many prior problems

A two-column layout of text with a large heading above it spanning both columns.
Structure content with spanning elements which will restart the flow of columns and prevent people from scrolling long distances.
Same two-column text layout, including an image in the first column.
Prevent figures from dividing their images and captions between columns.

Almost every article I’ve ever read about Multi-Column Layout focuses on its flaws, especially usability. CSS-Tricks’ own Geoff Graham even mentioned the scrolling up and down issue when he asked, “When Do You Use CSS Columns?”

“But an entire long-form article split into columns? I love it in newspapers but am hesitant to scroll down a webpage to read one column, only to scroll back up to do it again.”

Fortunately, the column-span property — which enables headlines, images, and quotes to span columns, resets the column flow, and instantly improves readability — now has solid support in browsers:

h1, h2, blockquote {
  column-span: all; 
}

But the solution to the scrolling up and down issue isn’t purely technical. It also requires content design. This means that content creators and designers must think carefully about the frequency and type of spanning elements, dividing a Multi-Column Layout into shallower sections, reducing the need to scroll and improving someone’s reading experience.

Another prior problem was preventing headlines from becoming detached from their content and figures, dividing their images and captions between columns. Thankfully, the break-after property now also has widespread support, so orphaned images and captions are now a thing of the past:

figure {
  break-after: column;
}

Open this final example in a desktop browser:

CodePen Embed Fallback

You should take a fresh look at Multi-Column Layout

Multi-Column Layout isn’t a shiny new tool. In fact, it remains one of the most underused layout tools in CSS. It’s had, and still has, plenty of problems, but they haven’t reduced its usefulness or its ability to add an extra level of refinement to a product or website’s design. Whether you haven’t used Multi-Column Layout in a while or maybe have never tried it, now’s the time to take a fresh look at Multi-Column Layout.

Revisiting CSS Multi-Column Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

The Browser Back Button: Hero, Villain, or Outdated Relic?

January 27th, 2025 No comments

The browser back button, once a vital tool for navigating the internet, is now a source of love-hate relationships among users, developers, and designers. While it provides a safety net for users, its unpredictability often disrupts modern web experiences.

Categories: Designing, Others Tags:

Positioning Text Around Elements With CSS Offset

January 24th, 2025 No comments

When it comes to positioning elements on a page, including text, there are many ways to go about it in CSS — the literal position property with corresponding inset-* properties, translate, margin, anchor() (limited browser support at the moment), and so forth. The offset property is another one that belongs in that list.

The offset property is typically used for animating an element along a predetermined path. For instance, the square in the following example traverses a circular path:

<div class="circle">
  <div class="square"></div>
</div>
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* Equivalent to:
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* etc. */
}

.circle:hover .square{ --p: 100%; }
CodePen Embed Fallback

A registered CSS custom property (--p) is used to set and animate the offset distance of the square element. The animation is possible because an element can be positioned at any point in a given path using offset. and maybe you didn’t know this, but offset is a shorthand property comprised of the following constituent properties:

  • offset-position: The path’s starting point
  • offset-path: The shape along which the element can be moved
  • offset-distance: A distance along the path on which the element is moved
  • offset-rotate: The rotation angle of an element relative to its anchor point and offset path
  • offset-anchor: A position within the element that’s aligned to the path

The offset-path property is the one that’s important to what we’re trying to achieve. It accepts a shape value — including SVG shapes or CSS shape functions — as well as reference boxes of the containing element to create the path.

Reference boxes? Those are an element’s dimensions according to the CSS Box Model, including content-box, padding-box, border-box, as well as SVG contexts, such as the view-box, fill-box, and stroke-box. These simplify how we position elements along the edges of their containing elements. Here’s an example: all the small squares below are placed in the default top-left corner of their containing elements’ content-box. In contrast, the small circles are positioned along the top-right corner (25% into their containing elements’ square perimeter) of the content-box, border-box, and padding-box, respectively.

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>
.small {
  /* etc. */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* etc. */
  contain: layout; /* (or position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}
CodePen Embed Fallback

Note: You can separate the element’s offset-positioned layout context if you don’t want to allocated space for it inside its containing parent element. That’s how I’ve approached it in the example above so that the paragraph text inside can sit flush against the edges. As a result, the offset positioned elements (small squares and circles) are given their own contexts using position: absolute, which removes them from the normal document flow.

This method, positioning relative to reference boxes, makes it easy to place elements like notification dots and ornamental ribbon tips along the periphery of some UI module. It further simplifies the placement of texts along a containing block’s edges, as offset can also rotate elements along the path, thanks to offset-rotate. A simple example shows the date of an article placed at a block’s right edge:

<article>
  <h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>
  <!-- paragraphs -->
  <div class="date">Published on 11<sup>th</sup> Dec</div>
  <cite>An excerpt from the HBR article</cite>
</article>
article {
  container-type: inline-size;
  /* etc. */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;
  
  /*
    Equivalent to:
    offset-path: padding-box;
    offset-distance: 100cqw; (100% of the container element's width)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}
CodePen Embed Fallback

As we just saw, using the offset property with a reference box path and container units is even more efficient — you can easily set the offset distance based on the containing element’s width or height. I’ll include a reference for learning more about container queries and container query units in the “Further Reading” section at the end of this article.

There’s also the offset-anchor property that’s used in that last example. It provides the anchor for the element’s displacement and rotation — for instance, the 90 degree rotation in the example happens from the element’s bottom-left corner. The offset-anchor property can also be used to move the element either inward or outward from the reference box by adjusting inset-* values — for instance, the bottom -10px arguments pull the element’s bottom edge outwards from its containing element’s padding-box. This enhances the precision of placements, also demonstrated below.

<figure>
  <div class="big">4</div>
  <div class="small">number four</div>
</figure>
.small {
  width: max-content;
  offset: content-box 90% -54deg / center -3rem;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: 90%;
    offset-rotate: -54deg;
    offset-anchor: center -3rem;
  */

  font-size: 1.5rem;
  color: navy;
}
CodePen Embed Fallback

As shown at the beginning of the article, offset positioning is animateable, which allows for dynamic design effects, like this:

<article>
  <figure>
    <div class="small one">17<sup>th</sup> Jan. 2025</div>
    <span class="big">Seminar<br>on<br>Literature</span>
    <div class="small two">Tickets Available</div>
  </figure>
</article>
@property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.small {
  /* other style rules */
  offset: content-box var(--d) 0deg / left center;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: var(--d);
    offset-rotate: 0deg;
    offset-anchor: left center;
  */

  transition: --d .2s linear;

  &.one { --d: 2%; }
  &.two { --d: 70%; }
}

article:hover figure {
  .one { --d: 15%;  }
  .two { --d: 80%;  }
}
CodePen Embed Fallback

Wrapping up

Whether for graphic designs like text along borders, textual annotations, or even dynamic texts like error messaging, CSS offset is an easy-to-use option to achieve all of that. We can position the elements along the reference boxes of their containing parent elements, rotate them, and even add animation if needed.

Further reading

Positioning Text Around Elements With CSS Offset originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Categories: Designing, Others Tags:

When DEI Fails: Is Diversity Just a Marketing Gimmick?

January 24th, 2025 No comments

DEI initiatives promise transformative change in creative industries but often devolve into performative actions that undermine trust and stifle innovation.

Categories: Designing, Others Tags:

6 Benefits of Predictive Maintenance in Fleet Management

January 24th, 2025 No comments

Keeping vehicles running smoothly is the name of the game in fleet management. Downtime costs money, disrupts schedules, and affects customer satisfaction. (It also draws the scrutiny of upper-level management, which is never a good idea.) 

That’s where predictive maintenance comes in. It gives you a proactive approach that leverages data and technology to forecast potential issues before they turn into costly problems.

Predictive maintenance has become a little bit of a buzzword over the past few years. But hopefully this article will show you that it’s a little more than just a flippant term. It’s actually a powerful tool that can transform the way you manage your fleet…when done correctly. 

By identifying problems early, you can save time, reduce costs, and improve overall efficiency. 

With all of this said, here are six key benefits of adopting predictive maintenance for your fleet.

1. Less Downtime

Unexpected breakdowns are one of the biggest challenges in fleet management. When a vehicle is sidelined for emergency repairs, it can throw off your entire operation. Predictive maintenance helps you avoid these scenarios by using real-time data to monitor the health of your vehicles and identify potential issues before they lead to failures.

For example, sensors can track the performance of critical components like brakes, tires, and engines, sending alerts when they show signs of wear or inefficiency. This allows you to schedule repairs at convenient times, ensuring minimal disruption to your workflow. Over time, fewer breakdowns mean improved reliability and smoother operations.

2. Reduced Maintenance Costs

Reactive maintenance – waiting for something to break before fixing it – can be expensive. Emergency repairs often come with higher labor costs and expedited shipping fees for parts. Then there’s the potential for more extensive damage if issues are left unchecked.

Predictive maintenance, on the other hand, allows you to address small problems before they escalate into costly repairs. By replacing components when they show early signs of wear instead of waiting for them to fail, you extend the lifespan of your vehicles and keep repair bills under control.

For example, catching a minor tire alignment issue early can prevent uneven wear that leads to costly tire replacements. Over time, these small savings add up, reducing your overall maintenance expenses in a pretty significant way.

3. Improved Safety

When your fleet is well-maintained, your drivers and cargo are safer. Predictive maintenance plays a critical role in preventing accidents caused by mechanical failures, such as brake malfunctions or tire blowouts.

By monitoring the condition of key components and addressing issues proactively, you reduce the risk of breakdowns on the road. This not only protects your drivers but also minimizes liability and ensures compliance with safety regulations.

On top of this, predictive maintenance builds trust with your drivers. This might not be immediately obvious, but when drivers know their vehicles are being carefully monitored and maintained, they can focus on their jobs without worrying about potential safety hazards.

4. Enhanced Efficiency

Predictive maintenance streamlines your operations by ensuring your fleet runs at peak performance. Vehicles that are in top condition consume less fuel, experience fewer delays, and require less frequent servicing.

For instance, a properly maintained engine operates more efficiently, reducing fuel consumption and emissions. Similarly, well-maintained tires improve handling and fuel efficiency, cutting costs and boosting productivity.

Predictive maintenance also simplifies scheduling. Instead of scrambling to address unexpected issues, you can plan maintenance tasks during downtime or off-peak hours, ensuring your vehicles are ready to hit the road when needed.

5. Data-Driven Decision-Making

Predictive maintenance relies on data collected from your fleet to make informed decisions. Telematics systems and sensors provide real-time insights into vehicle performance, such as engine temperature, tire pressure, and fuel efficiency.

This data lets you identify trends and make smarter decisions about repairs, replacements, and upgrades. (e.g. If a particular model in your fleet consistently shows signs of wear on specific components, you can adjust your maintenance schedule or consider upgrading to more reliable vehicles.)

Data-driven insights like these also help you evaluate the return on investment (ROI) of your maintenance strategies, making sure you’re allocating resources effectively.

6. Extends Lifespan of the Vehicle

Your fleet is a significant investment, and maximizing the lifespan of each vehicle is essential for maintaining profitability. Predictive maintenance helps you protect this investment by addressing wear and tear before it causes irreversible damage.

For example, regular monitoring of engine performance can prevent overheating or component failure, while timely oil changes and fluid top-offs ensure optimal operation. Over time, these practices reduce the strain on your vehicles, allowing them to stay on the road longer and reducing the need for premature replacements.

Extending the life of your fleet not only saves money but also reduces the environmental impact of manufacturing and disposing of vehicles. It’s a win-win for your bottom line and the planet.

Putting it All Together

For decades, fleets have operated on reactive terms (when it comes to maintenance). But now that we have the software and knowledge to act in a more predictive manner, it’s crucial that you rethink your approach. Yes, it will require some investment and overhaul to transition from your current approach to a new one, but the long-term ROI makes it an easy decision.

Featured Image by CDC on Unsplash

The post 6 Benefits of Predictive Maintenance in Fleet Management appeared first on noupe.

Categories: Others Tags:

Dropbox Unveils New Brand Identity Microsite

January 23rd, 2025 No comments

Dropbox has introduced a redesigned Brand Guidelines microsite, providing a comprehensive and interactive resource to explore its visual and verbal identity. Featuring tools like a variable type explorer, an icon slot machine, and detailed guidelines on color, typography, and more…

Categories: Designing, Others Tags:

Pinterest Unveils the 2025 Color Palette

January 22nd, 2025 No comments

Pinterest’s 2025 Color Palette introduces a vibrant mix of shades, including Butter Yellow, Cherry Red, and Dill Green, reflecting cultural trends and inspiring innovation across design fields. From branding and graphic design to interior spaces, this curated palette offers endless creative possibilities for designers.

Categories: Designing, Others Tags:

Product Hunt Launches 2024 Golden Kitty Awards

January 21st, 2025 No comments

Product Hunt has opened voting for the 2024 Golden Kitty Awards, celebrating the year’s most innovative products across 17 categories, including AI, design tools, and climate tech. Winners, determined by community votes, will receive the iconic Golden Kitty trophy and recognition for their groundbreaking contributions.

Categories: Designing, Others Tags: