Archive

Archive for May, 2022

4 Founder-Led Brands That Are Done Right

May 26th, 2022 No comments

When you hear the word “leadership,” do you think of a particular person?

If you’d been asked that question anytime before the 1900s, chances are you’d think of an accomplished politician or a battle-tested general. These were the people leading society for most of recorded history. Today, you might have someone else in mind.

Since the industrial era, the US has birthed a pantheon of founders who’ve arguably led our society as much as any statesman or president. We put Rockefeller and Ford right next to Lincoln and Jefferson. Think about it; these guys haven’t just changed the US; they’ve changed how the entire world lives and does business.

Founders of successful companies today command even larger amounts of capital and power than JD and Henry. With the rise of social media, they are often thrust to the forefront of their brands and the public, whether they like it or not. Some manage the responsibility better than others.

In my opinion, the best businesses use all that capital, manpower, and name recognition to do more than simply make a profit. By leading with authenticity, inspiring positive action, and influencing their brand’s vision for innovation – they try to make a change.

I wanted to take a minute to reflect on some modern founder-led brands I think are doing a killer job of creating unique, world-changing businesses and company cultures. I also want to discuss the lessons I have learned from them.

Elon Musk – Tesla

When talking about founder-led brands of the 21st century, it’s hard to pass over electric vehicle manufacturer Tesla and its outspoken CEO, Elon Musk. Love him or loathe him, he belongs in any conversation on influential founders.

While Musk isn’t technically the founder of Tesla, he is one hundred percent responsible for the company’s direction over the past decade. I think two of the strongest leadership points for Musk are his focus on branding and innovation.

Tesla created showrooms and charging stations long before his business had the sales to justify the expense. People saw the name Tesla everywhere, got curious about it, and now that’s paying off big time. Tesla today is at the forefront of the EV industry while all the other car companies play catch-up.

Behind the scenes, Tesla was also early to create a vertically-integrated supply chain – giving it almost complete control over its product and logistics. That’s another feature with a hefty upfront price tag but paid off when the pandemic hit. Now the biggest automakers in the world are rushing to copy that model.

Musk arguably even convinced China to deregulate foreign ownership of automotive companies. That’s hard to prove. However, China changed its rules around foreign ownership of EV companies shortly after he refused to enter the country.

Arguably, Tesla today is one of the frontrunners in redefining how traditional companies run. Musk is known to hate bureaucracy and traditional hierarchies. He hires other people to take care of bureaucratic processes for him.

Musk is also known for hiring relatively young, hard-working employees into high-power management positions in the company and letting them prove themselves. That inspires extreme loyalty from his employees from an early age. Musk’s focus on efficiency and rejection of traditional hierarchies has sparked a small revolution in tech companies.

Finally, I respect Musk because he has goals beyond showing year-over-year growth to shareholders. That’s hard to do day in and day out.

Sara Blakely – Spanx

Sara Blakely is an example of a founder with her hands in every part of her business, from product creation to sales. Most importantly, she created an authentic company culture with values she felt the business world lacked.

For those who know her story, Spanx very nearly didn’t happen. Blakely pitched her slimming undergarment to multiple women’s brands run by men. Most told her it would never work.

It might seem silly now, but men used to think they knew women’s fashion better than women. It wasn’t until one executive gave Blakely’s product to his daughters to try out that he agreed to start stocking Spanx. It’s a great example of how businesses can make a lot of money by listening to their customers.

Besides founding a women’s clothing company that sells products women want, Blakely strived to bring “feminine energy” into the workplace. I saw this poignant quote from her in an article:

“Twenty-one years ago when I started Spanx, I ended up in the paper in Atlanta, and I was at a cocktail party and a couple of guys came up to me and they said, ‘Sara, we read about you. Congratulations! We heard you invented something.’ And I said, ‘Yes I did, I’m so excited.’ They said, ‘Business is war,’ and then they pat me on the shoulder and they kind of laughed at each other. I went back home to my apartment that night. I was 29 and I just thought, I’m not going to war. I’m going to do this very differently. I’m going to honor a lot of feminine principles — intuition, empathy, kindness. Just allowing myself to be vulnerable through this process. And of course, a lot of the masculine energy has helped me also — it was a balance. But I wasn’t going to do it by squashing the feminine.”

Blakely worked hard to create a sales-oriented company culture that was purposely welcoming from that point forward. She regularly scheduled “oops meetings” where employees could stand up and say how they messed up and turn it into a funny story. At Spanx, it was okay to make mistakes and learn from them.

Blakely wanted everything about her product to be fun, including the way it was sold. She created a mandatory boot camp for salespeople, which, among other things, requires employees to perform standup comedy. Little things like that resonated with people and made Spanx synonymous with “fun.” Even famous actresses were flashing their Spanx on the red carpet.

The lesson we can all learn from Spanx and Blakely is that fun and positive energy are great marketing tools for any business. Many companies try to push a fun culture publicly without any authentic leadership that genuinely exemplifies that narrative, they won’t have the same effect. Blakely’s story of Spanx is not just a story of the brand but a story of her life and the experiences that shaped her vision and goals.

Jack Dorsey – Block (FKA Square)

While better known for founding Twitter, Jack Dorsey has recently been in the news for his move to solely running payment processing business Block. I admire Dorsey because he radically encourages his teams to think differently about how they work.

Dorsey is known for optimizing ways to stay productive and focused throughout the day. He manages through unconventional tactics like communicating only through voice memos on his phone that he runs through transcription apps. He says this prevents him from being sidetracked by distractions on his computer. I think that kind of mindfulness is necessary now more than ever.

Dorsey tries to bring this level of focus to his interactions with his employees too. I saw a great quote from him in this article discussing computer-less meetings at Block.

“When phones are down and laptops are closed, the team can discuss any issue at hand without distraction. We can actually focus and not just spend an hour together but make that time meaningful — and if that time is 15 minutes, then it’s 15 minutes and then we move on with our lives.”

Besides limiting distractions, Dorsey is known to walk five miles to work daily, theme each day, and create detailed agendas and goals for each team meeting. In his former company, Twitter, the culture was frequently described as a space where employees could speak freely to management about things they wanted to change.

On that subject, Dorsey has been known to push hard for employee control in his companies. Perhaps ironically, he was also quoted saying he wants Twitter to break away from its co-founders’- vision and control, calling founder-led companies “severely limiting.” However, it still seems he has some sort of vision for the world that he wants to bring around via Block.

His business goals are visionary, pushing the boundaries of innovation in the financial world.

Dorsey is a known cryptocurrency enthusiast but had pushback from the Twitter team, including his CFO, about making a crypto-centric product. His move to payments processor, Block, seems to be a bid to follow his passion and exert his vision on the world.

Block has since made headlines for being extremely bullish on cryptocurrencies, while many have expressed doubts. Dorsey even changed the business’s name to Block to better reflect its focus on blockchain and famously purchased $50 million worth of Bitcoin in 2020. All the while, Dorsey has been quietly creating arms of his business in the hopes of improving BTC’s usefulness. That may pay off down the line.

Melanie Perkins – Canva

I identify strongly with Melanie Perkins, co-founder of graphic design SaaS, Canva. Besides being roughly the same age, we both came from nondescript beginnings with no background in entrepreneurship or tech.

Canva is an excellent example of a business created by becoming intimately familiar with a customer problem and executing. Perkins spent years teaching people how to use design platforms like Adobe Creative Suite because they were so complicated. Taking that knowledge, she started a simple product to help customers create high school yearbooks. That expanded into a super app covering every aspect of design.

This super-app has unlocked a way for millions to learn design and produce high-quality content at any skill level. The cost to use Canva is many times lower than anything else on the market.

While Canva is an amazing product, what I like most about Perkins is that she believes business serves a higher purpose than maximizing profits.

When she was suddenly thrust into the limelight with a $40 billion valuation, people were even more impressed by Perkins’ philanthropic goals. She vowed to donate a 30 percent stake in Canva to a charity dedicated to eliminating poverty (about $12 billion). She is also known to regularly fundraise for 25,000 different nonprofits through her app. She doesn’t just inspire people with words, but by actions, she’s actually taking.

Canva is very public about its ethos. I like their values because they are general yet avoid the jargon many companies fall into. They are:

  • To be a force for good and empower others;
  • Pursue excellence;
  • Be a good human;
  • Make complex things simple;
  • Set crazy big goals and make them happen.

Besides revolutionizing how modern businesses design and harness goodwill marketing, Canva was also one of the forerunners of the remote work trend.

Most of Canva’s “Canvanauts” worked from homes worldwide even before the pandemic. Canva showed a lot of tired old businesses that you could still run a successful company without having employees in the office 24/7.

How I Try to Learn From the Best

Finally, I want to talk about what I am trying to contribute to my team and society with my current business, startup acquisition marketplace, MicroAcquire.

As I’ve mentioned, I think it is very much on myself as a founder to set the tone of my business – and that starts with who I hire. When I’m searching for new employees to join the “#Micromafia” I not only look for productive workers, I look for people I genuinely enjoy spending time with. It’s the best feeling in the world to go to meetings where you leave thinking, “That was really fun.”

Besides creating a great team, I’ve tried to address another problem I see again and again at major tech companies: employee burnout. There’s a reason the average tenure of a tech employee is three years.

I love working on startups. It’s like playing a video game for me, and it’s probably why I’m a founder. That said, I know my employees don’t always feel the same way. As CEO, I make sure my team knows I want them to live their lives outside of MicroAcquire.

On the business side of things, I take cues from the best. Like Musk and Dorsey, I want to preemptively create features that I know our customers will love. I knew people wanted an easy way to sell their startups because I wished I’d had one back when I was doing it.

Like Spanx and Tesla, I also strongly believe in the power of innovative branding – and I make sure we spend in areas that will give us significant returns down the line.

For example, we’ve made it easy to get MicroAcquire merchandise online completely free. The extra exposure we get from tech people rocking MicroAcquire t-shirts is more than worth the cost. We also created our own media publication Bootstrappers.com to tell the founder stories we thought major publications had missed. That’s been a huge hit with our customers, who also happen to be founders. These people traditionally have had to spam inboxes and pay for press because they didn’t raise billions in funding.

Finally, like Blakely and Perkins, I also want to actively listen to customer feedback and make sure we create a necessary and desired product. That’s why I make sure we’re constantly engaging with our community both on our website and social media. Many of the features we’ve added are just things we’ve heard mentioned multiple times from customers.

So far, I love the community we’ve created online and in the office. I don’t claim to have the winning formula, but I feel we are making a real difference out there. We’re lucky to live in a world with so many smart people getting their ideas out and making a positive change in the world.

 

Featured image via Unsplash.

Source

The post 4 Founder-Led Brands That Are Done Right first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

How do I learn Digital Marketing? – 2022

May 26th, 2022 No comments

Digital marketing is a spreading buzz and a new profession in marketing and on the internet as well.

Everybody is now a part of digital marketing and everyone wants to be a digital marketing expert or want to be a part of digital marketing.

If you want to learn digital marketing then, you must go to the best institutes of digital marketing. Nowadays, digital marketing courses are valid in the list of courses after the 12th for commerce, Science, and Arts streams.

There are many students who pursue this course and grade up their career in the market at a high pay scale.

Here in the article, we will share the different ways of learning digital marketing. However, you can start your career by implementing different ways.

Additionally, we will include the digital marketing common queries of the people and start with scratch to make you understand in a better way. 

What is Digital Marketing?

Digital marketing is a strategy and tactics of a diverse set to build the brand value of a product or company on the internet.

However, you can never learn digital marketing completely. But, can keep a learning attitude to enhance your skills on regular basis.

Here is the specialization of digital marketing mentioned below:

  1. Search Engine Marketing
  2. Search Engine Optimization
  3. Social Media Marketing
  4. Content Marketing
  5. Email Marketing
  6. Web Designing

These are the potent of digital marketing that matters while implementing various strategies and planning to grow rank on the internet.

Now, let’s head over to the different ways of learning digital marketing. Before heading over to the multiple learning methods. You must acknowledge the scope of digital marketing first.

Scope of Digital Marketing

The scope of digital marketing evolves each year with more companies entering the space and new technologies.

Let’s discuss a few digital marketing trends. 

1. Analytics

Analytics is the key tool that helps users to understand the statistics of the content. This is certainly helpful, but real-time analytics is beginning to shake up the world of digital marketing. 

2. Video Marketing

Video will always remain on the top priority in the content list. Also, it has proved to be more interactive and understandable as compared to reading the content. 

Moreover, the keywords related to the video and images will be helping you to gain more visibility on the search engine. 

Many users are looking for images and videos by writing the relevant keywords. Hence, this profoundly increases the scope of digital marketing.

3. Virtual Reality

Companies and organizations are adopting the use of virtual reality in their marketing strategies to enhance brand awareness and satisfy customer demand. 

You can say, that companies or brands like Starbucks, Nivea, and others use virtual reality and have launched successful VR campaigns to offer customers an experience that better connects them to their brands and products. 

4. Omni-channel Marketing 

While today’s consumer expects every company to have an online presence, it’s best to use a range of channels to contact your target market in a seamless manner.

A television commercial, for example, should have an internet tie-in that is tailored for both desktop and mobile consumers.

Consumers can learn about and engage with your product (or service) through a number of media before and after they purchase it.

5. Content Marketing

Interactive content isn’t new, but it’s been accepted as a more effective marketing tool than ever before.

Not only do they allow potential customers to spend more time on your brand, but they also allow you to collect more data and thus refine your digital marketing strategy.

Interactive content may include contests in terms of expanding the reach of digital marketing. Voting, voting, and even games. 

Providing users with more ways to interact with their brand also contributes to the ultimate goal of better personalization.

How Do I Learn Digital Marketing?

You can opt for both free and paid learning of digital marketing. Here we will include both ways for entry-level and experienced as well.

Head over with the article to learn digital marketing.

1. Watching Youtube

You can learn digital marketing from youtube videos by learning from the big faculties which may include advanced knowledge. 

Here you can be stuck and further, you would be needing certification or a project to show your skills while appearing in the interview.

2. Doing Internship

The internship is a learning phase where you can accumulate all knowledge of digital marketing and can grow faster in the digital market industry.

Doing an internship in the company will give you the opportunities to work and you can then have the experience to boost your career in digital marketing. 

That’s why doing an internship is one of the best ways to learn digital marketing.

3. Earning Certification

Earning Certification is also one of the best ways to learn digital marketing and you can go for the best digital marketing courses to enroll in the popular institutes of digital marketing.

However, the popular institute will include many factors to train the folks.

Conclusion

This is all about how do I learn digital marketing in 2022. Apart from this, there are a lot of paid digital marketing programs are available both online and offline.

Keep your goals in mind and identify what you specifically want to learn whether you learn digital marketing online or through offline training.

Whether you want to brush up on your digital marketing abilities or are a complete beginner who wants to learn everything there is to know about digital marketing, there are plenty of resources accessible to help you.

The post How do I learn Digital Marketing? – 2022 appeared first on noupe.

Categories: Others Tags:

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

May 26th, 2022 No comments
Breakdown of the CSS hover effect in four stages.
The trick may look like we’re interacting with a 3D element, but we’re merely using 2D tactics to draw a 3D box

The first thing we do is to define our variables:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Then we create a transparent border with widths that use the above variables:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

The top and right sides of the element both need to equal the --b value while the bottom and left sides need to equal to the sum of --b and --d (which is the --_s variable).

For the second part of the trick, we need to define one gradient that covers all the border areas we previously defined. A conic-gradient will work for that:

background: conic-gradient(
  at left var(--_s) bottom var(--_s),
  #0000 90deg,var(--c) 0
 ) 
 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;
Diagram of the sizing used for the hover effect.

We add another gradient for the third part of the trick. This one will use two semi-transparent white color values that overlap the first previous gradient to create different shades of the main color, giving us the illusion of shading and depth.

conic-gradient(
  at left var(--d) bottom var(--d),
  #0000 90deg,
  rgb(255 255 255 / 0.3) 0 225deg,
  rgb(255 255 255 / 0.6) 0
) border-box
Showing the angles used to create the hover effect.

The last step is to apply a CSS clip-path to cut the corners for that long shadow sorta feel:

clip-path: polygon(
  0% var(--d), 
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, 
  0% 100%
)
Showing the coordinate points of the three-dimensional cube used in the CSS hover effect.

That’s all! We just made a 3D rectangle with nothing but two gradients and a clip-path that we can easily adjust using CSS variables. Now, all we have to do is to animate it!

Notice the coordinates from the previous figure (indicated in red). Let’s update those to create the animation:

clip-path: polygon(
  0% var(--d), /* reverses var(--d) 0% */
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 
  0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

The trick is to hide the bottom and left parts of the element so all that’s left is a rectangular element with no depth whatsoever.

This pen isolates the clip-path portion of the animation to see what it’s doing:

CodePen Embed Fallback

The final touch is to move the element in the opposite direction using translate — and the illusion is perfect! Here’s the effect using different custom property values for varying depths:

CodePen Embed Fallback

The second hover effect follows the same structure. All I did is to update a few values to create a top left movement instead of a top right one.

Combining effects!

The awesome thing about everything we’ve covered is that they all complement each other. Here is an example where I am adding the text-shadow effect from the second article in the series to the background animation technique from the first article while using the 3D trick we just covered:

CodePen Embed Fallback

The actual code might be confusing at first, but go ahead and dissect it a little further — you’ll notice that it’s merely a combination of those three different effects, pretty much smushed together.

Let me finish this article with a last hover effect where I am combining background, clip-path, and a dash of perspective to simulate another 3D effect:

CodePen Embed Fallback

I applied the same effect to images and the result was quite good for simulating 3D with a single element:

CodePen Embed Fallback

Want a closer look at how that last demo works?

We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use any shadows. We also combined them with CSS variables and calc() to optimize the code and make it easy to manage.

In this article, we will build off those two articles to create even more complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives. In other words, we are going to explore advanced techniques this time around and push the limits of what CSS can do with hover effects!

Cool Hover Effects series:

  1. Cool Hover Effects That Use Background Properties
  2. Cool Hover Effects That Use CSS Text Shadow
  3. Cool Hover Effects That Use Background Clipping, Masks, and 3D (you are here!)

Here’s just a taste of what we’re making:

CodePen Embed Fallback

Hover effects using background-clip

Let’s talk about background-clip. This CSS property accepts a text keyword value that allows us to apply gradients to the text of an element instead of the actual background.

So, for example, we can change the color of the text on hover as we would using the color property, but this way we animate the color change:

CodePen Embed Fallback

All I did was add background-clip: text to the element and transition the background-position. Doesn’t have to be more complicated than that!

But we can do better if we combine multiple gradients with different background clipping values.

CodePen Embed Fallback

In that example, I use two different gradients and two values with background-clip. The first background gradient is clipped to the text (thanks to the text value) to set the color on hover, while the second background gradient creates the bottom underline (thanks to the padding-box value). Everything else is straight up copied from the work we did in the first article of this series.

How about a hover effect where the bar slides from top to bottom in a way that looks like the text is scanned, then colored in:

CodePen Embed Fallback

This time I changed the size of the first gradient to create the line. Then I slide it with the other gradient that update the text color to create the illusion! You can visualize what’s happening in this pen:

CodePen Embed Fallback

We’ve only scratched the surface of what we can do with our background-clipping powers! However, this technique is likely something you’d want to avoid using in production, as Firefox is known to have a lot of reported bugs related to background-clip. Safari has support issues as well. That leaves only Chrome with solid support for this stuff, so maybe have it open as we continue.

Let’s move on to another hover effect using background-clip:

CodePen Embed Fallback

You’re probably thinking this one looks super easy compared to what we’ve just covered — and you are right, there’s nothing fancy here. All I am doing is sliding one gradient while increasing the size of another one.

But we’re here to look at advanced hover effects, right? Let’s change it up a bit so the animation is different when the mouse cursor leaves the element. Same hover effect, but a different ending to the animation:

CodePen Embed Fallback

Cool right? let’s dissect the code:

.hover {
  --c: #1095c1; /* the color */

  color: #0000;
  background: 
    linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, 
    linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat,
    var(--_c, #0000);
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  transition: 0s, color .5s, background-color .5s;
}
.hover:hover {
  color: #fff;
  --_c: var(--c);
  --_p: 100%;
  transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

We have three background layers — two gradients and the background-color defined using --_c variable which is initially set to transparent (#0000). On hover, we change the color to white and the --_c variable to the main color (--c).

Here’s what is happening on that transition: First, we apply a transition to everything but we delay the color and background-color by 0.5s to create the sliding effect. Right after that, we change the color and the background-color. You might notice no visual changes because the text is already white (thanks to the first gradient) and the background is already set to the main color (thanks to the second gradient).

Then, on mouse out, we apply an instant change to everything (notice the 0s delay), except for the color and background-color that have a transition. This means that we put all the gradients back to their initial states. Again, you will probably see no visual changes because the text color and background-color already changed on hover.

Lastly, we apply the fading to color and a background-color to create the mouse-out part of the animation. I know, it may be tricky to grasp but you can better visualize the trick by using different colors:

CodePen Embed Fallback

Hover the above a lot of times and you will see the properties that are animating on hover and the ones animating on mouse out. You can then understand how we reached two different animations for the same hover effect.

Let’s not forget the DRY switching technique we used in the previous articles of this series to help reduce the amount of code by using only one variable for the switch:

.hover {
  --c: 16 149 193; /* the color using the RGB format */

  color: rgb(255 255 255 / var(--_i, 0));
  background:
    /* Gradient #1 */
    linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%,
    /* Gradient #2 */
    linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat,
    /* Background Color */
    rgb(var(--c)/ var(--_i, 0));
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  --_t: calc(var(--_i,0)*.5s);
  transition: 
    var(--_t),
    color calc(.5s - var(--_t)) var(--_t),
    background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover {
  --_i: 1;
}

If you’re wondering why I reached for the RGB syntax for the main color, it’s because I needed to play with the alpha transparency. I am also using the variable --_t to reduce a redundant calculation used in the transition property.

Before we move to the next part here are more examples of hover effects I did a while ago that rely on background-clip. It would be too long to detail each one but with what we have learned so far you can easily understand the code. It can be a good inspiration to try some of them alone without looking at the code.

CodePen Embed Fallback
CodePen Embed Fallback
CodePen Embed Fallback

I know, I know. These are crazy and uncommon hover effects and I realize they are too much in most situations. But this is how to practice and learn CSS. Remember, we pushing the limits of CSS hover effects. The hover effect may be a novelty, but we’re learning new techniques along the way that can most certainly be used for other things.

Hover effects using CSS mask

Guess what? The CSS mask property uses gradients the same way the background property does, so you will see that what we’re making next is pretty straightforward.

Let’s start by building a fancy underline.

CodePen Embed Fallback

I’m using background to create a zig-zag bottom border in that demo. If I wanted to apply an animation to that underline, it would be tedious to do it using background properties alone.

Enter CSS mask.

CodePen Embed Fallback

The code may look strange but the logic is still the same as we did with all the previous background animations. The mask is composed of two gradients. The first gradient is defined with an opaque color that covers the content area (thanks to the content-box value). That first gradient makes the text visible and hides the bottom zig-zag border. content-box is the mask-clip value which behaves the same as background-clip

linear-gradient(#000 0 0) content-box

The second gradient will cover the whole area (thanks to padding-box). This one has a width that’s defined using the --_p variable, and it will be placed on the left side of the element.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Now, all we have to do is to change the value of --_p on hover to create a sliding effect for the second gradient and reveal the underline.

.hover:hover {
  --_p: 100%;
  color: var(--c);
}

The following demo uses with the mask layers as backgrounds to better see the trick taking place. Imagine that the green and red parts are the visible parts of the element while everything else is transparent. That’s what the mask will do if we use the same gradients with it.

CodePen Embed Fallback

With such a trick, we can easily create a lot of variation by simply using a different gradient configuration with the mask property:

CodePen Embed Fallback

Each example in that demo uses a slightly different gradient configuration for the mask. Notice, too, the separation in the code between the background configuration and the mask configuration. They can be managed and maintained independently.

Let’s change the background configuration by replacing the zig-zag underline with a wavy underline instead:

CodePen Embed Fallback

Another collection of hover effects! I kept all the mask configurations and changed the background to create a different shape. Now, you can understand how I was able to reach 400 hover effects without pseudo-elements — and we can still have more!

Like, why not something like this:

CodePen Embed Fallback

Here’s a challenge for you: The border in that last demo is a gradient using the mask property to reveal it. Can you figure out the logic behind the animation? It may look complex at first glance, but it’s super similar to the logic we’ve looked at for most of the other hover effects that rely on gradients. Post your explanation in the comments!

Hover effects in 3D

You may think it’s impossible to create a 3D effect with a single element (and without resorting to pseudo-elements!) but CSS has a way to make it happen.

CodePen Embed Fallback

What you’re seeing there isn’t a real 3D effect, but rather a perfect illusion of 3D in the 2D space that combines the CSS background, clip-path, and transform properties.

The trick may look like we’re interacting with a 3D element, but we’re merely using 2D tactics to draw a 3D box

The first thing we do is to define our variables:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Then we create a transparent border with widths that use the above variables:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

The top and right sides of the element both need to equal the --b value while the bottom and left sides need to equal to the sum of --b and --d (which is the --_s variable).

For the second part of the trick, we need to define one gradient that covers all the border areas we previously defined. A conic-gradient will work for that:

background: conic-gradient(
  at left var(--_s) bottom var(--_s),
  #0000 90deg,var(--c) 0
 ) 
 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;
Diagram of the sizing used for the hover effect.

We add another gradient for the third part of the trick. This one will use two semi-transparent white color values that overlap the first previous gradient to create different shades of the main color, giving us the illusion of shading and depth.

conic-gradient(
  at left var(--d) bottom var(--d),
  #0000 90deg,
  rgb(255 255 255 / 0.3) 0 225deg,
  rgb(255 255 255 / 0.6) 0
) border-box
Showing the angles used to create the hover effect.

The last step is to apply a CSS clip-path to cut the corners for that long shadow sorta feel:

clip-path: polygon(
  0% var(--d), 
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, 
  0% 100%
)
Showing the coordinate points of the three-dimensional cube used in the CSS hover effect.

That’s all! We just made a 3D rectangle with nothing but two gradients and a clip-path that we can easily adjust using CSS variables. Now, all we have to do is to animate it!

Notice the coordinates from the previous figure (indicated in red). Let’s update those to create the animation:

clip-path: polygon(
  0% var(--d), /* reverses var(--d) 0% */
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 
  0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

The trick is to hide the bottom and left parts of the element so all that’s left is a rectangular element with no depth whatsoever.

This pen isolates the clip-path portion of the animation to see what it’s doing:

CodePen Embed Fallback

The final touch is to move the element in the opposite direction using translate — and the illusion is perfect! Here’s the effect using different custom property values for varying depths:

CodePen Embed Fallback

The second hover effect follows the same structure. All I did is to update a few values to create a top left movement instead of a top right one.

Combining effects!

The awesome thing about everything we’ve covered is that they all complement each other. Here is an example where I am adding the text-shadow effect from the second article in the series to the background animation technique from the first article while using the 3D trick we just covered:

CodePen Embed Fallback

The actual code might be confusing at first, but go ahead and dissect it a little further — you’ll notice that it’s merely a combination of those three different effects, pretty much smushed together.

Let me finish this article with a last hover effect where I am combining background, clip-path, and a dash of perspective to simulate another 3D effect:

CodePen Embed Fallback

I applied the same effect to images and the result was quite good for simulating 3D with a single element:

CodePen Embed Fallback

Want a closer look at how that last demo works? I wrote something up on it.

Wrapping up

Oof, we are done! I know, it’s a lot of tricky CSS but (1) we’re on the right website for that kind of thing, and (2) the goal is to push our understanding of different CSS properties to new levels by allowing them to interact with one another.

You may be asking what the next step is from here now that we’re closing out this little series of advanced CSS hover effects. I’d say the next step is to take all that we learned and apply them to other elements, like buttons, menu items, links, etc. We kept things rather simple as far as limiting our tricks to a heading element for that exact reason; the actual element doesn’t matter. Take the concepts and run with them to create, experiment with, and learn new things!


Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

Customizing Color Fonts on the Web

May 26th, 2022 No comments

Myles C. Maxfield on the WebKit Blog published a nifty how-to for color fonts. It comes on the heels of what Ollie wrote up here on CSS-Tricks the other day, and while they cover a lot of common ground, there’s some nice nuggets in the WebKit post that make them both worth reading.

Case in point: there’s a little progressive enhancement in there using @supports for older browsers lacking support the font-palette property. Then the post gets into a strategy that shows the property’s light and dark values at play to make the font more legible in certain contexts. There’s also a clever idea about how creating multiple @font-palette-values blocks with the same name can be used for fallbacks.

To Shared LinkPermalink on CSS-Tricks


Customizing Color Fonts on the Web originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

A Perfect Table of Contents With HTML + CSS

May 25th, 2022 No comments
Misaligned numbers and dots in a table of contents.

To fix this problem, I set font-variant-numeric to tabular-nums so all numbers are treated with the same width. By also setting the minimum width to 2ch, I ensured that all numbers with one or two digits are perfectly aligned. (You may want to set this to 3ch if your project has more than 100 pages.) Here is the final CSS for the page number:

.toc-list li > a > .page {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
Aligned leader dots in a table of contents.

And with that, the table of contents is complete!

CodePen Embed Fallback

Conclusion

Creating a table of contents with nothing but HTML and CSS was more of a challenge than I expected, but I’m very happy with the result. Not only is this approach flexible enough to accommodate chapters and subsections, but it handles sub-subsections nicely without updating the CSS. The overall approach works on web pages where you want to link to the various locations of content, as well as PDFs where you want the table of contents to link to different pages. And of course, it also looks great in print if you’re ever inclined to use it in a brochure or book.

I’d like to thank Julie Blanc and Christoph Grabo for their excellent blog posts on creating a table of contents, as both of those were invaluable when I was getting started. I’d also like to thank Sara Soueidan for her accessibility feedback as I worked on this project.


Earlier this year, I self-published an ebook called Understanding JavaScript Promises (free for download). Even though I didn’t have any intention of turning it into a print book, enough people reached out inquiring about a print version that I decided to self-publish that as well .I thought it would be an easy exercise using HTML and CSS to generate a PDF and then send it off to the printer. What I didn’t realize was that I didn’t have an answer to an important part of a print book: the table of contents.

The makeup of a table of contents

At its core, a table of contents is fairly simple. Each line represents a part of a book or webpage and indicates where you can find that content. Typically, the lines contain three parts:

  1. The title of the chapter or section
  2. Leaders (i.e. those dots, dashes, or lines) that visually connect the title to the page number
  3. The page number

A table of contents is easy to generate inside of word processing tools like Microsoft Word or Google Docs, but because my content was in Markdown and then transformed into HTML, that wasn’t a good option for me. I wanted something automated that would work with HTML to generate the table of contents in a format that was suitable for print. I also wanted each line to be a link so it could be used in webpages and PDFs to navigate around the document. I also wanted dot leaders between the title and page number.

And so I began researching.

I came across two excellent blog posts on creating a table of contents with HTML and CSS. The first was “Build a Table of Contents from your HTML” by Julie Blanc. Julie worked on PagedJS, a polyfill for missing paged media features in web browsers that properly formats documents for print. I started with Julie’s example, but found that it didn’t quite work for me. Next, I found Christoph Grabo’s “Responsive TOC leader lines with CSS” post, which introduced the concept of using CSS Grid (as opposed to Julie’s float-based approach) to make alignment easier. Once again, though, his approach wasn’t quite right for my purposes.

After reading these two posts, though, I felt I had a good enough understanding of the layout issues to embark on my own. I used pieces from both blog posts as well as adding some new HTML and CSS concepts into the approach to come up with a result I’m happy with.

Choosing the correct markup

When deciding on the correct markup for a table of contents, I thought primarily about the correct semantics. Fundamentally, a table of contents is about a title (chapter or subsection) being tied to a page number, almost like a key-value pair. That led me to two options:

  • One option is to use a table (
    ) with one column for the title and one column for the page.
  • Then there’s the often unused and forgotten definition list (
    ) element. It also acts as a key-value map. So, once again, the relationship between the title and the page number would be obvious.
  • Either of these seemed like good options until I realized that they really only work for single-level tables of contents, namely, only if I wanted to have a table of contents with just chapter names. If I wanted to show subsections in the table of contents, though, I didn’t have any good options. Table elements aren’t great for hierarchical data, and while definition lists can technically be nested, the semantics didn’t seem correct. So, I went back to the drawing board.

    I decided to build off of Julie’s approach and use a list; however, I opted for an ordered list (

      ) instead of an unordered list (

        ). I think an ordered list is more appropriate in this case. A table of contents represents a list of chapters and subheadings in the order in which they appear in the content. The order matters and shouldn’t get lost in the markup.

        Unfortunately, using an ordered list means losing the semantic relationship between the title and the page number, so my next step was to re-establish that relationship within each list item. The easiest way to solve this is to simply insert the word “page” before the page number. That way, the relationship of the number relative to the text is clear, even without any other visual distinction.

        Here’s a simple HTML skeleton that formed the basis of my markup:

        <ol class="toc-list">
          <li>
            <a href="#link_to_heading">
              <span class="title">Chapter or subsection title</span>
              <span class="page">Page 1</span>
            </a>
        
            <ol>
              <!-- subsection items -->
            </ol>
          </li>
        </ol>

        Applying styles to the table of contents

        Once I had established the markup I planned to use, the next step was to apply some styles.

        First, I removed the autogenerated numbers. You can choose to keep the autogenerated numbers in your own project if you’d like, but it’s common for books to have unnumbered forewords and afterwords included in the list of chapters, which makes the autogenerated numbers incorrect.

        For my purpose, I would fill in the chapter numbers manually then adjust the layout so the top-level list doesn’t have any padding (thus aligning it with paragraphs) and each embedded list is indented by two spaces. I chose to use a 2ch padding value because I still wasn’t quite sure which font I would use. The ch length unit allows the padding to be relative to the width of a character — no matter what font is used — rather than an absolute pixel size that could wind up looking inconsistent.

        Here’s the CSS I ended up with:

        .toc-list, .toc-list ol {
          list-style-type: none;
        }
        
        .toc-list {
          padding: 0;
        }
        
        .toc-list ol {
          padding-inline-start: 2ch;
        }

        Sara Soueidan pointed out to me that WebKit browsers remove list semantics when list-style-type is none, so I needed to add role="list" into the HTML to preserve it:

        <ol class="toc-list" role="list">
          <li>
            <a href="#link_to_heading">
              <span class="title">Chapter or subsection title</span>
              <span class="page">Page 1</span>
            </a>
        
            <ol role="list">
              <!-- subsection items -->
            </ol>
          </li>
        </ol>
        CodePen Embed Fallback

        Styling the title and page number

        With the list styled to my liking, it was time to move on to styling an individual list item. For each item in the table of contents, the title and page number must be on the same line, with the title to the left and the page number aligned to the right.

        You might be thinking, “No problem, that’s what flexbox is for!” You aren’t wrong! Flexbox can indeed achieve the correct title-page alignment. But there are some tricky alignment issues when the leaders are added, so I instead opted to go with Christoph’s approach using a grid, which as a bonus as it also helps with multiline titles. Here is the CSS for an individual item:

        .toc-list li > a {
          text-decoration: none;
          display: grid;
          grid-template-columns: auto max-content;
          align-items: end;
        }
        
        .toc-list li > a > .page {
          text-align: right;
        }

        The grid has two columns, the first of which is auto-sized to fill up the entire width of the container, minus the second column, which is sized to max-content. The page number is aligned to the right, as is traditional in a table of contents.

        The only other change I made at this point was to hide the “Page” text. This is helpful for screen readers but unnecessary visually, so I used a traditional visually-hidden class to hide it from view:

        .visually-hidden {
          clip: rect(0 0 0 0);
          clip-path: inset(100%);
          height: 1px;
          overflow: hidden;
          position: absolute;
          width: 1px;
          white-space: nowrap;
        }

        And, of course, the HTML needs to be updated to use that class:

        <ol class="toc-list" role="list">
          <li>
            <a href="#link_to_heading">
              <span class="title">Chapter or subsection title</span>
              <span class="page"><span class="visually-hidden">Page</span> 1</span>
            </a>
        
            <ol role="list">
              <!-- subsection items -->
            </ol>
          </li>
        </ol>

        With this foundation in place, I moved on to address the leaders between the title and the page.

        CodePen Embed Fallback

        Creating dot leaders

        Leaders are so common in print media that you might be wondering, why doesn’t CSS already support that? The answer is: it does. Well, kind of.

        There is actually a leader() function defined in the CSS Generated Content for Paged Media specification. However, as with much of the paged media specifications, this function isn’t implemented in any browsers, therefore excluding it as an option (at least at the time I’m writing this). It’s not even listed on caniuse.com, presumably because no one has implemented it and there are no plans or signals that they will.

        Fortunately, both Julie and Christoph already addressed this problem in their respective posts. To insert the dot leaders, they both used a ::after pseudo-element with its content property set to a very long string of dots, like this:

        .toc-list li > a > .title {
          position: relative;
          overflow: hidden;
        }
        
        .toc-list li > a .title::after {
          position: absolute;
          padding-left: .25ch;
          content: " . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . ";
          text-align: right;
        }

        The ::after pseudo-element is set to an absolute position to take it out of the flow of the page and avoid wrapping to other lines. The text is aligned to the right because we want the last dots of each line flush to the number at the end of the line. (More on the complexities of this later.) The .title element is set to have a relative position so the ::after pseudo-element doesn’t break out of its box. Meanwhile, the overflow is hidden so all those extra dots invisible. The result is a pretty table of contents with dot leaders.

        However, there’s something else that needs consideration.

        Sara also pointed out to me that all of those dots count as text to screen readers. So what do you hear? “Introduction dot dot dot dot…” until all of the dots are announced. That’s an awful experience for screen reader users.

        The solution is to insert an additional element with aria-hidden set to true and then use that element to insert the dots. So the HTML becomes:

        <ol class="toc-list" role="list">
          <li>
            <a href="#link_to_heading">
              <span class="title">Chapter or subsection title<span class="leaders" area-hidden="true"></span></span>
              <span class="page"><span class="visually-hidden">Page</span> 1</span>
            </a>
        
            <ol role="list">
              <!-- subsection items -->
            </ol>
          </li>
        </ol>

        And the CSS becomes:

        .toc-list li > a > .title {
          position: relative;
          overflow: hidden;
        }
        
        .toc-list li > a .leaders::after {
          position: absolute;
          padding-left: .25ch;
          content: " . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . "
              ". . . . . . . . . . . . . . . . . . . . . . . ";
          text-align: right;
        }

        Now screen readers will ignore the dots and spare users the frustration of listening to multiple dots being announced.

        CodePen Embed Fallback

        Finishing touches

        At this point, the table of contents component looks pretty good, but it could use some minor detail work. To start, most books visually offset chapter titles from subsection titles, so I made the top-level items bold and introduced a margin to separate subsections from the chapters that followed:

        .toc-list > li > a {
          font-weight: bold;
          margin-block-start: 1em;
        }

        Next, I wanted to clean up the alignment of the page numbers. Everything looked okay when I was using a fixed-width font, but for variable-width fonts, the leader dots could end up forming a zigzag pattern as they adjust to the width of a page number. For instance, any page number with a 1 would be narrower than others, resulting in leader dots that are misaligned with the dots on previous or following lines.

        To fix this problem, I set font-variant-numeric to tabular-nums so all numbers are treated with the same width. By also setting the minimum width to 2ch, I ensured that all numbers with one or two digits are perfectly aligned. (You may want to set this to 3ch if your project has more than 100 pages.) Here is the final CSS for the page number:

        .toc-list li > a > .page {
          min-width: 2ch;
          font-variant-numeric: tabular-nums;
          text-align: right;
        }
        Aligned leader dots in a table of contents.

        And with that, the table of contents is complete!

        CodePen Embed Fallback

        Conclusion

        Creating a table of contents with nothing but HTML and CSS was more of a challenge than I expected, but I’m very happy with the result. Not only is this approach flexible enough to accommodate chapters and subsections, but it handles sub-subsections nicely without updating the CSS. The overall approach works on web pages where you want to link to the various locations of content, as well as PDFs where you want the table of contents to link to different pages. And of course, it also looks great in print if you’re ever inclined to use it in a brochure or book.

        I’d like to thank Julie Blanc and Christoph Grabo for their excellent blog posts on creating a table of contents, as both of those were invaluable when I was getting started. I’d also like to thank Sara Soueidan for her accessibility feedback as I worked on this project.


        A Perfect Table of Contents With HTML + CSS originally published on CSS-Tricks. You should get the newsletter.

        Categories: Designing, Others Tags:

        How to Protect Your Work Computer from Information Leakage

        May 25th, 2022 No comments

        The use of different computing systems, the Internet, and tons of mobile devices give freedom to the users. But it also imposes certain risks on everyone who enters the global Internet community. Data leakage is a common issue big and small companies try to cope with these days. 

        You might have heard about the multiple cases when data was stolen or leaked from even the major companies, what to say about the small companies. How to prevent data leakage and protect yourself from having your personal information lost? This guide will clarify the details and help prevent damage to your data. 

         Data Leak Definition: What’s the Concept? 

        What does it mean if your data has been leaked? It means there was an exposure of data due to the overlooked issue with the operating system or other technical problems. These days, it mostly happens in the technical world, and not in the physical one. 

        You can have your data lost internally. But it’s also possible that your information is stolen via the hardware tools. How do you protect your computer and prevent data loss? Before we answer this question, let’s check what the most common data leak types are. 

         Data Leak Types: Top 3 Examples to Learn About  

        If you want to prevent data leakage, you should learn more about the most common types of data leakage. There are many more of them, but these types occur most frequently. It’s easier to keep track of what’s going on with your data when you are familiar with the basic data leak types. Let’s check them in detail. 

        Customer data  

        The stats and different research analyses prove the Customer Data breach to be the largest data leak target. What does it comprise? There are different types of information. Nevertheless, personal details can differ from companies, there are unanimous types and groups of data. It could be a phone number, email address, or a regular address you live in. It can be a user name, password, or payment history on your phone. 

        Your card numbers might also be a target of data leak hacking attacks. 

         Analytics  

        Analytics consists of the data because it represents the researched information from the web. Thus, customer behavior or psychographic data might be easily leaked, unless it’s well protected from the attacks. 

         Company information  

        This is the type of internal hacking activity. If the company information has been leaked, there was probably someone who gave the instructions and guidelines to the hackers. This is another concern to be worried about. In general, these are internal conversations, marketing techniques, and strategies. These could also be performance metrics. 

         How to Protect Sensitive Data and Prevent Leakage  

        How can we prevent confidential information leakage? You might think that sharing your personal details on the web is risky. Yes, it may be dangerous, unless you know how to prevent your data from being leaked. 

        There are specific data leakage prevention tools and techniques to help you feel safe on the web and ensure the best and most secure user experience. You can’t help sharing your data online. But you can learn how to make your web surfing safer. 

         Access and use monitoring  

        It’s important to keep track of all the traffic that happens within the company’s network on the web. To breach a system, a hacker needs some time. It depends on the scale of the hacking activity. One way or another, by monitoring the access activity and regular user behavior, it’s easier to spot the issues and fix them. 

         VPN  

        There’s another way to make your user activity less exposed to the hacking attack. If you use VPN app for Mac, you will feel safer. It also works for Windows. And Linux users can benefit from it, too. You can install VeePN to any operating system. If you get the best VPN for Mac OS, your data is securely encrypted. But there’s not only a VPN for Macbook. You can use the tool for PC with any operating system. All you need is to install VPN and implement it during the work with the data. 

        How does it work? It will protect the general access to the network and prevent the connection from being lost or damaged. The IP address won’t be seen by random internet users. The VPN download practice is one of the best ways to ensure secure surf on the web. 

         Encryption use  

        Whether you manage a small business or work in a big company, there should be well-developed encryption. It works the best for any sensitive or vulnerable information you may possess. How does it help? When the data is properly encrypted, it can’t be read. Any information will be useless if it’s been carefully encrypted by the experts. 

        Network lock-down  

        If you want to prevent data leakage, there’s one critical issue. Some users are familiar with the necessity to lock down the network. But others don’t know how important this step is. If you want to prevent data leak cases, it’s better to teach your team or teach yourself how to lock down the network properly. 

         Summary  

        What’s a data leak? Now you know the answer to this question and understand how important data protection practice is. Any information can be stolen, so overlooking the data use, traffic, and access within the network might result in a complete failure. For this reason, there are helpful pieces of advice for anyone concerned about information leakage. 

        In the article, you will find the relevant types of data leak examples. It must help you orientate the topic and know what to prevent in the first place. Here you can also benefit from the useful tips on how to protect your details on the Internet. Make sure to use these tips and prevent any harmful hacking attacks. 

        The post How to Protect Your Work Computer from Information Leakage appeared first on noupe.

        Categories: Others Tags:

        Supporting Healthcare IT Compliances with Proper Data Security Protocols?

        May 25th, 2022 No comments

        Healthcare is one of the most important sectors that have exponentially increased its usage of digital technologies. To make healthcare services more accessible and efficient, today, digital healthcare has become a new normal. But, with such increasing popularity of healthcare IT, the vulnerability of healthcare organizations against cyberthreats has also increased. 

        To ensure that healthcare IT security protocols match the quality criteria, there are certain regulations such as HIPAA Privacy Rule in place. Healthcare organizations have to match HIPAA rules apart from regulations set by other bodies such as their country’s government. According to a Statista report, in 2020, $21.6 billion were invested in digital healthcare. This was the largest investment made until now in healthcare IT. So, you can imagine the growing popularity of digital healthcare but in parallel, the increasing requirement of proper cybersecurity compliances that can keep protecting healthcare data even in the future.

        In this blog, furthermore, we are focusing on a few points that will explain how organizations can support healthcare IT compliances and meet them. So, if you find the topic intriguing, stay with us until the end of this blog. 

        An introduction to HIPAA?

        Before proceeding further to understanding how a healthcare organization can be modified to meet the needs of HIPAA, let’s get introduced to HIPAA in short. The Health Insurance Portability and Accountability Act (HIPAA), in 1966, became a law. HIPAA has compliances that developers are supposed to comply with, especially, if they are building an app that uses protected health information (PHI). Any healthcare app involved in the process of managing, storing, or sharing has to comply with HIPAA. 

        Measures to take to comply with healthcare IT security standards

        Now, let’s discuss the real deal to figure out steps that can be taken to ensure compliance with healthcare IT security standards. 

        1. Staff training

        Top cybersecurity tips under HIPAA or any major regulation require organizations to train their employees. Many cyberattacks are done through phishing. Thus, security awareness among human resources is a crucial step to take especially when the staff is directly involved and has access to healthcare data on their devices. 

        2. Data encryption

        Data encryption protocols have become a common practice among apps. To stop unauthorized parties from accessing, modifying, stealing, or destroying the data, data encryption protocols are designed. Some apps have even started using machine learning techniques to recognize and predict any possibilities of cyberattacks that can occur in the future as well.

        3. Proper control 

        Developers of healthcare apps are supposed to follow healthcare IT consulting protocols that provide the original data owner with proper control over their healthcare data. They decide who they want to share the data with and get transparent information on how their data is going to be used. Under these compliances, unauthorized data access to any party apart from hospitals attaining the patient will be restricted and the control over data sharing will remain in the hands of the patient. 

        4. Data transparency

        To meet HIPAA compliances, data transparency is a crucial protocol. Developers have to ensure that all data accesses are logged into the app so that data owners can figure out which organizations or individuals have access to their PHI. For security audits and to strengthen data privacy protocols, such logs can be really useful. Also, the original owner of the data can ensure if they provided access to organizations mentioned in logs or not. These logs can also be used to track any data breach attempts or entry points that have been used as gateways by cyberattackers. 

        5. Multi-factor authentication

        To ensure the credibility of the app user, multi-factor authentication protocols can be really useful. To enable multiple authentications, information such as one-time passwords, permanent PIN, biometric authentication, etc can be used. Many banking apps are using such authentications as well. Also, it is much easier to ensure enhanced security now due to the continuously evolving security features provided in smartphones. From biometric authentication to face recognition, modern smartphones are capable of offering multiple layers of security protocols that can easily help your app in complying with regulations.

        6. IoT device management

        Connected devices or IoT devices have access to the data stored on a server. Fitness bands, blood pressure measuring devices, etc, are some examples of IoT devices active in the healthcare industry. Most of these devices are controlled and monitored through mobile apps. Thus, many developers are using technologies such as AI to continuously keep an eye on connected devices to recognize and predict any device that can face a malfunction in the future or become a vulnerable point for cyberattackers. 

        7. Data backups and restorations

        It is crucial to remain prepared in advance, in case patient information gets hampered or destroyed by unauthorized parties. Data backup is the key that can help in retrieving the data. Even in any accidents or natural disasters, these data backups can be used to recover the data. And, to ensure that data is continuously stored on cloud networks in the form of backups, real-time data backup protocols are recommended. Many healthcare organizations are also considering blockchain technology as the secured server to store data and its backups along with strong encryptions. 

        8. Regular risk assessments

        With time, as technology gets more advanced, the digital world prepares itself for evolved cyber threats. To ensure that your app is keeping up with these cyberthreats, regular risk assessments are required. It can help you in identifying any weaknesses that might become an opportunity for cyber attackers in the future. And, as new cyberattack cases occur in related markets, it is also ideal to update old security protocols to prepare them for new attacks that are being noticed by cybersecurity experts. 

        Now, risk assessments do not only require observing the application regularly, but they also need to cover connected devices, the risk level of authorized personals, authentication methods, etc. 

        Wrapping up

        Security compliances for healthcare IT companies keep evolving with time. But, the ultimate goal is to ensure the security and integrity of sensitive patient information that can be misused by unauthorized parties. Hopefully, this blog helps you in understanding some bits and pieces of the information that can help you in building apps by ensuring compliance with many leading regulatory bodies including HIPAA. We will see you with another well-researched blog soon.

        The post Supporting Healthcare IT Compliances with Proper Data Security Protocols? appeared first on noupe.

        Categories: Others Tags:

        10 Terrific WordPress Plugins You Should Be Using in 2022

        May 24th, 2022 No comments

        Having the right WordPress plugins on hand can do wonders for your business or online presence. WordPress offers a vast collection to choose from.

        There are so many of them. However, finding those that get the best reviews and can do the most for you can be a challenge.

        A plugin can give you additional functionality. It could otherwise be difficult or overly expensive to realize with your website by itself. A glance at the 10 top WordPress plugins described below can provide a powerful case in point.

        Your website’s purpose or niche will usually dictate the types of essential WordPress plugins you would do well to invest in. The right ones can make your website a genuine powerhouse and, by extension, your business as well.

        1. Amelia

        Amelia is an excellent choice for beauty, healthcare, fitness, consulting, and businesses that might be saddled down with a manual or semi-manual booking system by saving them and their clients time while eliminating booking mistakes that often occur in those manual systems.

        • Clients can book appointments online 24/7, change or cancel their appointments, and receive reminders of upcoming appointments and other notifications via SMS or email.
        • Amelia enables business owners or department managers to track and manage employee schedules and time off.
        • Amelia can manage bookings for appointments, book tickets for events, and manage group bookings, all at multiple locations. There are no limits on the number of appointments that can be managed.
        • Booking forms can be customized to best serve a business’s needs and match its brand.

        Amelia fully supports WooCommerce with PayPal, Stripe, Mollie, and RazorPay payments. Click on the banner to learn more about this time and money-saving plugin.

        2. wpDataTables

        wpDataTables is a premier WordPress table and chart building plugin that features virtually everything you are apt to need to build any table or chart you want.

        Creating a table that is by any definition complex often requires tools that may not necessarily be easy to come by. wpDataTables uses four chart-building engines, one or more of which should suit you perfectly.

        They are:

        • Google Charts
        • Highcharts
        • Charts.js
        • Apex Charts

        For both table and chart building, wpDataTables can connect you to multiple database sources, including –

        • MySQL
        • MS SQL
        • PostgreSQL

        wpDataTables can process data that exists in the commonly used formats and features various sorting and filtering options that allow you to create a host of different table types.

        Both tables and charts are editable and responsive and, thanks to the wpDataTables conditional formatting feature, can highlight and color-code critical information.

        Click to learn more.

        3. Site Kit by Google

        While your website’s performance might exceed your wildest dreams, it is more likely that there are areas that need improvement before your wishes can be met. 

        Determining those areas can be a challenge, but Site Kit offers a one-stop solution to deploy, manage, and get insights from critical Google tools to make your site a success by making those critical tools available to WordPress.

        They provide:

        • stats displayed on your WordPress dashboard from multiple Google tools
        • quick Google tool setup without your having to edit your site’s source code  
        • key metrics and insights for your entire site and individual posts, and
        • easy-to-manage, granular permissions across WordPress and different Google products

        Site Kit shows you how many people have found your site, how users navigate it, etc.

        Click on the banner to learn more about what Site Kit could do for you.

        4. Tablesome –  WordPress Table Plugin With Form Automation

        Tablesome is a WordPress form database and form automation plugin that you can use to store entries from WordPress forms to a database. It can be integrated with popular forms – Contact Form 7 DB, WPForms entries, Forminator database, Elementor Form submissions, etc.

        After saving, you can:

        • Edit, auto-delete, and export entries to tools such as MailChimp, Google Sheets, Salesforce, etc.,
        • Display WordPress form entries on frontend pages
        • Automatically export contact data using the Mailchimp WordPress Integration

        5. TheDock

        TheDock eliminates the need to search for just the right WordPress theme by enabling you to create your own – which can be more fun anyway.

        Among TheDock’s many features, a few key ones include –

        • A comprehensive, option-rich Design System
        • A responsive design system that ensures your site looks great on all screens.
        • Designer, developer, and editing collaboration support. 
        • Clean, readable code.

        6. Slider Revolution

        Beginners and mid-level designers can sometimes have difficulty finding ways to WOW their clients with professional-level visuals.

        Slider Revolution changes all that by bridging the gap between what clients want and what you can provide with its –

        • 200 designed-to-impress website and slider templates
        • 25+ powerful addons and brand new WebGL slide animations
        • ability to import dynamic content from WooCommerce and social media outlets.

        7. LayerSlider

        More than a simple slider-builder, LayerSlider is an animation and website-building tool you can use to improve any website’s look and feel through eye-catching animations, contemporary graphics, and interactive features.

        This is made possible in part through the use of –

        • 160+ website, slider, and popup templates
        • LayerSlider’s modern and intuitive editing interface

        Plus, you can count on professional one-on-one customer support.

        8. Download Monitor

        The Download Monitor plugin helps you sell your digital products by offering a ready solution for tracking file downloads, gating content to generate leads, build your audience, and ask users for personal information in exchange for valuable content.

        Download Monitor lets you –

        • add any type of file you need to your website
        • link a page to all your channels and promote your social media networks
        • place ads – and more.

        9. Ads Pro – Multi-Purpose WordPress Ad Manager

        The biggest ad manager for WordPress, Ads Pro gives you everything necessary to manage and sell ads.

        Ads Pro’s admin panel makes managing ads straightforward for you and your users.

        • Key ad features include 25+ ad templates and 20+ ad display options.
        • CPC, CPM, CPD billing and PayPal, Stripe, and bank transfer payment methods are built-in.
        • Geo-Targeting lets you show/hide ad spaces based on countries, provinces, cities, and Zip Codes.

        10. Ultimate Membership Pro

        If selling content is your objective, Ultimate Membership Pro is the tool you’ll want to take your website and convert it into a powerful content selling platform.

        The Ultimate Membership Pro plugin enables you to –

        • Create unlimited subscription levels, including free, trial, and paid member subscriptions
        • Control customer access to content based on their subscriptions
        • Send emails to welcome new members and send notifications and reminders to regular subscribers.

        The WordPress plugin directory is already stuffed with almost 60,000 plugins. This guide has been published to narrow things down to 10 top WordPress plugins for your use.

        We consulted with experts to create this list of excellent plugins for WordPress. It can help you with content strategy, SEO, site security, and even social media marketing.

        Installing plugins and getting the functionality they provide can add immense value to your use of WordPress.

         

        [- This is a sponsored post on behalf of BAW Media -]

        Source

        The post 10 Terrific WordPress Plugins You Should Be Using in 2022 first appeared on Webdesigner Depot.

        Categories: Designing, Others Tags:

        How to Film The Perfect Product Promotion Video for Your Business

        May 24th, 2022 No comments

        Creating a promotional video can seem complex, but it is not as challenging as you think. You can easily film, publish, and edit a video that becomes a valuable marketing tool, and you would require training or a large budget. You might hear the term promo video usually in the context of online commercial surroundings and upcoming events.

        What is a promo video? How to film the perfect product promotion video for your business? What is the advantage of creating a promo video? How to best use such videos? Today, we’re going to answer everything in this article. So keep going through the article till the end to get all your doubts solved right away.

        What is a Product Promotion Video?

        Video used to promote a business product or service is called a product promotion video. This type of video is used to inspire, educate, and engage all types of customers, including existing or potential. Product promotional video is short videos that are primarily used to promote a product or inform the audience about the key advantages of a business product or service.

        Call-to-action can also be included in the video that urges the targeted audience to take an essential step. This type of video content can be used for expressing the purpose of products, services, improving product sales, or any other. There are four different types of a promotional video that you can choose to create, these includes:

        Introductory Video: For Authenticity

        How-To Video: For Authority

        Product Video: For Quality

        Personal Video: For Personality

        Benefits of Creation Product Promotion Video for Your Business

        Searching the balance between the type of promotional videos might result in the difference between running a successful marketing strategy or one that leaves you shaking your head. Hence make sure to recognize what type of video can work for you in the most effective manner. Getting word-of-mouth about your business is crucial for your business growth and ROI.

        Regardless, people need to know your brand exists, and this is where promotional videos come into existence. It helps to visually tell the success story of your business and product in a relatable and engaging way. The main purpose of a product promotion video is to promote a service, product, launch, or holiday sale, inspiring viewers to take action. Such video type is easily the most crucial type in which the business can invest. Let’s explore some of the crucial reasons that explain why you must film the product promotion video for your business.

        Customers Prefer Video Compared to Text

        Videos are one of the best and most effective ways to promote your product because it’s something that everyone is searching for, especially when they want to learn about a particular product or service. 

        More than 72% of customers and around 59% of executives prefer learning about brands’ products by watching videos instead of reading the text. Videos can help display the products more contextually, efficiently, and engaging.

        Image: Source

        People can Retain Information Better from Videos

        While promoting your product through video content, it becomes crucial for you to make sure that people are able to retain the information and message that you communicate to them, so they can search for it and also buy the same. With the right product promotion videos, viewers can retain around 95% of a message when they watch a video compared to 10% when reading a text.

        Helps Humanize Your Business

        When real people talk about the use of your business product in the promotional video, you can easily enable the audience to see a face that can be attached to the brand and its product as well. Displaying a strong element of humanization through product promotion can help customers to feel like they are buying and using products in their day-to-day lives.

        Clearly Showcase Your Products

        More than 97% of marketers believe that videos help users gain a clear understanding of the product. Product promo video gives businesses a chance to showcase the product and display all its features in the most effective manner. 

        Image: Source

        Even lots of images can’t show how well your product works which can easily be explained through a promotion video.

        It makes it easier for you to provide a certain context to demonstrate how your product works and benefits customers. Looking at the product at work will definitely help you push your targeted audience to try the same.

        When You Should Use Product Promotion Videos

        Product promo videos are an excellent way to attract customers by creating awareness for your new products. If you are a startup and have launched a new product, having a product promotion video can help to introduce the brand by showing off your product.

        These videos can work with your existing customers as well. You can draw them by reminding them how good your products are. It also helps create more reasons for your customers to believe in you.

        What Do Your Product Promo Videos Need to Be Successful?

        Now you might be knowing about why you need to film a product promo video. But do you know what your product promo videos need to be successful? Check the following points to know what can help you make a successful promo video.

        1. Product promo videos need to be engaging and entertaining

        2. Do focus on your product and how it can help individuals in their daily lives

        3. Make sure to keep the videos short and sweet

        4. Show your brand’s personality through promo videos

        5. Include a call to action prompt in the video.

        How to Create a Product Promo Video?

        More than 51% of people agree that the main reason they use the internet is to stream; they use it to watch TV shows, movies, videos, and more. Your potential buyers are likely to watch videos online and might be exploring your competitor’s videos. Many businesses host different types of videos on the site and share them on Facebook, YouTube, Instagram, and many such.

        Image: Source

        Creating a video can help you expand your business reach to those who might not have heard about your brand before or meet your audience through the way they love the most. You can invest in a video streaming script that makes video management, upload, editing, and other work much easier and faster for you. But before all this, it becomes vital for you to learn to create promotional product videos for your brands. Explore the steps right here to know how to create engaging product promo videos.

        Gear Up

        You do not have to spend the kid’s inheritance making equipment to make an engaging promo video. All you need is:

        • High-quality camera
        • Tripod to ensure that shots are not shaky
        • Editing equipment, including movie-making apps

        Decide the Message

        First of all, ensure to identify the main purpose of making a video and try to target the right audience before you start planning to create the video content. Know whether you are creating a video to improve the sales flow, introduce your product, or have any other purpose. Try to sum up the primary purpose of the promo video in a single sentence.

        Create a Storyboard

        This helps you ensure that you get the perfect shorts you need in as little time as possible. Without a storyboard, there is a certain chance that you miss shots that can be essential for a final edit, get distracted, and move off on tangents while filming.

        Get permission

        People often forget about the legal side of the video creating and promoting process. Before starting your journey, question yourself if you have completed all the legal processes. If not, then make sure to get all the necessary permission to avoid further issues.

        Casting

        It is a delicate process. You might be thinking that it’s an easy process, even when you want to film the CEO or other company members. You need to understand that everyone can’t act naturally in front of the camera; most people struggle to stiffen or look up. The primary purpose here is to ease whoever you are filming in the session.

        Shoot and Edit

        Now it’s time for the light, camera, and action—finally, film to make your vision come to life. Your storyboard and script should be as detailed as possible, ensure that specific visuals are filmed, and don’t get disappointed with the final result during the editing stage.

        One important tip that you need to follow while editing your shot is to question the worth of each shot. Make sure to add more value to your footage and need to edit it out to make way for valuable content.

        Ending Note

        Product promo videos do not have to be blockbuster. No matter how big or small you want to film, you can choose to complete it within your budget. Nail the basics to ensure maximum engagement and effectiveness with your ideal audience. You can make your promo video work for you, not the other way better.

        The post How to Film The Perfect Product Promotion Video for Your Business appeared first on noupe.

        Categories: Others Tags:

        The Ultimate Guide to Knowledge Management Systems

        May 24th, 2022 No comments

        If your business is swamped with inquiries it would probably be a help to have a well-organized system of information accumulation, so that when the same queries come up repeatedly, situations can be dealt with in real-time. 

        Even better if the user can find the solution to their issue themselves. Well, luckily, such a system exists. It’s called a Knowledge Management System.  

        What Exactly Is a Knowledge Management System?

        Data is becoming more highly valued. In fact, 85% of US companies are now increasing their focus on data. So, it makes sense to look at how best to structure this. 

        In the most general sense, a Knowledge Management System is a way of storing and accessing the expertise and wisdom born from experience, so that the circulation of intelligence can flourish.  

        These systems can find themselves in many guises and in a multitude of applications. It can be said, for instance, that every library on earth is a knowledge management system. As is a magnetic memo pad stuck on the side of the fridge.

        Knowledge Management Systems can be broadly divided into internal and external. The former is intended to deliver benefit to the staff member needing answers to work-based queries like “how to record a phone conversation?” and requiring models of the business process. This can be very useful in employee training, for instance. The latter is focused on giving those outside the organization the information they need in a clear and reliable manner.

        For the purposes of this article, we’ll concentrate primarily on the latter. We’ll cover the system used in client support, as this is an area of increasing interest to organizations wishing to improve customer care while saving money. 

        Examples of a Knowledge Management System in Customer Support

        Research shows that customers want more product information.

        Image Source

        So, the aim of the game is to render the customer adequately informed. Here are a few ways Knowledge Management Systems can do this.  

        Frequently Asked Questions (FAQs)

        An FAQ section is a feature that is used extremely widely. They can be said to be the very essence of a Knowledge Management System. As the name suggests, the question list therein is generated from the most common enquiries directed at the website or over a digital phone number over at a call center. The answers provided are gleaned from the expertise accumulated over time. 

        This expertise is readily accessed by the enquirer, who is able to acquire satisfaction with little or no output in effort or time from any of your team. No wonder FAQs are such an internet mainstay. They’re a very significant way of improving the customer online experience, especially on sales channels.

        Forums

        These are a great way of harnessing user expertise and making it available for other users. A user’s perspective can unearth nuance that may have eluded the sales entity’s attention. It’s not so great though when overly critical material surfaces. This is of course the problem with accessing the voice of customer experience. For this reason, moderation is often required.

        Tutorials

        These can be very effective, especially for more complex processes. They do depend on a certain amount of commitment on the part of the user to see the job through to the end. Your organization can assist in the likelihood of success here by ensuring that the tutorial quality is sufficiently simple and compelling to result in fulfilment.

        Case Studies

        For detail and story value, a case study can be very useful. As long as the story of a company’s overcoming of a particular issue has relevance to the user reading it, it can provide the color and real-life aspect that is crucial in generating impact.

        Reviews

        Massively significant in terms of user value, reviews have a huge influence on sales. 

        Image Source

        Beware negative reviews, though. Of special concern are bogus negative reviews posted by those with an interest in your commercial demise. This then is another area that will benefit from at least a little monitoring, with an eye to ensuring data integrity.

        Knowledge Management System Benefits

        New Customers Can be Attracted

        Sales prospecting made easy. How? Customers exploring a new product or service will often wish to have a well-rounded portrait of what they’re looking at. For this purpose, the reviews, tutorials, and case studies found in your organization’s Knowledge Management System can be invaluable. 

        More than this though, a customer wanting to see if your company has the agility and commitment to be able to respond effectively to customer concerns will find assurance in the presence of a good Knowledge Management System.   

        A Happy Customer is a Retained Customer

        More specifically, customers need to feel that a company cares about them.

        Image Source

        When you can deliver this kind of benefit without committing expensive staff time you have a win.

        Freeing Up

        You and your staff can be liberated from more repetitive tasks such as dealing with the tenth instance of the same query that morning. If you can match this spare capacity with tasks requiring more creativity and spontaneity, you’ll probably have a happier and more fulfilled workforce.

        Avoid Loss

        When staff members leave, the expertise gap generated can be enormously damaging to a company’s collective competence. It could be that a departing member of staff knows all there is to know in many areas like knowing how to transfer phone calls to another phone or understanding what is HDFS file system. Some of this you will want to enshrine. 

        Rather than having to gather this information once more, you can encapsulate it safely, thereby weathering the ups and downs of staff turnover more easily.

        Creating a Knowledge Management System

        The knowledge in your system is of two broad kinds; what are the questions people are asking? What are the answers to these questions?

        User Questions

        Image Source

        You’ll probably already have an excellent resource here. Your frontline staff will deal with user questions every day. Collate data from their accounts on what comes up most. 

        Sensation bias (where the most eye-catching and colorful issues tend to be more readily recalled) can distort matters, so it’s good to pair this approach with a trawl through a section of your company’s support tickets. The information that will be available can be really helpful here.

        Another tool you can use is ecommerce analytics: by studying what your site visitors are searching for, you can construct a good picture of customer interest. 

        Finally, don’t forget to keep an eye on mentions your company may score on internet marketing software and social media. The frankness that characterizes social media will give you a great window into what users are currently feeling about your products and services.

        Generating the Answers

        Don’t assume you have all the best answers yourself. Your staff will have accumulated a wealth of information between them, so don’t be afraid to mine their expertise. Pair this with your own knowledge, plus product information from the manufacturers, and you will start to build a detailed information base.

        It’s a wise move to go looking at other companies’ systems or check their affiliate marketing tools. You may find that some of the issues that you are seeking information on will already have been dealt with elsewhere. Just be sure to use the general information and not the exact wording. Commercial larceny makes for twitchy lawyers.

        Making Answers Accessible

        There is a dichotomy in Knowledge Management Systems thinking that can be characterized thus: storing knowledge vs sharing knowledge (or, on a similar note, codification vs personalization). Stored knowledge without any access facility is pretty much useless. 

        Naturally, you’ll want to ensure security where necessary, but your fundamental goal is to enhance user learning. As previously mentioned, one of the advantages of a Knowledge Management System is being able to deliver this without a big staff spend. This is a key concern for businesses:

        Image Source

        Which of the varieties of Knowledge Management System outlined earlier in this piece you decide to use depends on the size of your operation and your customer profile. Overall though, it’s a good idea to incorporate a blend of different approaches. Your priorities are threefold: make the information easy to find, readily understandable, and as definitive as you can manage. This is the way to bring about a better customer experience.

        Making Your System Better

        Image Source

        The importance of research into the user experience of knowledge bases is illustrated by how many times a pop-up will enquire about your satisfaction just as you leave the site. It’s best practice to combine this data with other approaches (such as time on page or bounce rate) in tandem.

        The best way to make your system better is by regularly attending to its content to ensure that the information within is up to date and relevant. You also need to review pages to try to address parts that some users seem to have struggled with.

        Finally, stay abreast of developments in technology so that your system can stay at the cutting edge of the game.

        These are all ways you can be sure of improving data quality in your company.

        Conclusion

        By putting in place a decent Knowledge Management System, you can streamline activities for all concerned. Just don’t assume it’s a fire-and-forget solution.

        Knowledge needs to be treated as a living entity to be of use to your company and your customers. It needs nurturing and feeding, it needs pruning and shaping: it needs regular attention from your wise hands.

        The post The Ultimate Guide to Knowledge Management Systems appeared first on noupe.

        Categories: Others Tags: