Category: Web Development

When you reach out to a business for the first time, where does the interaction occur? Personal experience probably tells you that it’s their website, and that first interaction is going to influence how likely you are to engage further. Regardless of the type of business you’re operating it’s the website that attracts leads and delivers conversions. This is especially crucial for a B2B website.

For B2B businesses, which typically have longer, more complex sales funnels, a website that’s built to meet clients at each touchpoint and move them one step closer to conversion is essential. Without an approach to website design that takes the unique nature of B2B businesses into consideration, you might get potential clients to land on your site, but you’re not going to see the results with lead generation and conversion optimization that you’re looking for.

B2B Website Optimizations

What are the top strategies for optimizing your B2B web development for conversions? Here’s what matters most according to top website design companies.

Security

Think about it. You’re running a business and protecting it from hackers and cybercriminals is a major priority. You wouldn’t be interested in connecting your business with one that didn’t have a secure website, so you can’t really expect others to either.

Lack of security is something that often plagues smaller B2B operations. Many of them simply aren’t aware of the potential consequences of not taking those few extra steps for security. Google has made it super easy for clients to spot a site without an SSL certificate, plus having an unsecured site can tank your SEO efforts.

Responsive Design

In the past, responsive design wasn’t a top priority for B2B websites because it was assumed that most business contacts weren’t reaching out to you through their phones. Times are changing, and an increasingly remote workforce means it’s time to shed the assumptions and invest in a responsive design website that provides a seamless experience across each and every one of their devices.

Speed

It’s not exactly breaking news that speed matters for web development, but for B2B businesses, a slow loading site can equal certain death. If the average search engine user isn’t willing to wait more than a mere few seconds to load, a client is going to lose interest even sooner. Not to mention that a slow loading site makes you look unprofessional and outdated.

Navigation

There’s a strong trend in B2B websites for clean, simple single page web design. There isn’t anything wrong with this approach to web design, especially since they’re easy to optimize for speed and generally function well for the mobile consumer. The only downside is that sometimes, navigation is left in the dust.

Just because you have a single page site doesn’t mean that navigation is unimportant. The last thing you want to do is leave visitors scrolling to find what they’re looking for or risk having them miss a crucial CTA. Design your site with sticky navigation to eliminate any navigational pain points that might stand in the way of CRO.

Connect with a Professional B2B Website Design Company

The look and functionality of your B2B website is a major component of your success. Even details that seem relatively minor can have a significant influence on the likelihood that a new lead will convert. At Double Up Digital, we specialize in CRO focused web development. You can trust our web design company with your reputation. Contact Double Up Digital today.

Ask any web design agency or marketer about the secrets to building a following and generating conversions, and you’ll likely get an answer that has something to do with emotions. Humans are emotionally driven and appealing to various emotions is key to moving consumers through your sales funnel.

There are plenty of ways to engage emotions, some obvious and others not so much. For instance, a content strategy that appeals to emotions is an obvious strategy. When it comes to the subtler emotional elements, color is one of the most important.

There have been significant studies concerning the psychology of color and how to leverage color from a branding and marketing standpoint. The colors that are used throughout your website design are essential for every step of the customer journey – from first impression and lead generation to the final stages into conversion.

Color Psychology

We live in a world that’s filled with color, and the colors that we come in contact with can have a major impact on how we experience our surroundings. Take for example how a person’s mood can be supercharged on a sunny day, but take a nosedive after a few days of cloudy, gray weather. In business, the ability to understand the psychology of color and how it affects the emotional connection customers have with your brand is a very powerful tool.

Color psychology is basically the study of human behaviors in relation to different colors and hues. It’s the study of how we react physically and respond emotionally to color, as well as how it influences our decisions – like whether or not to purchase a product or invest in a brand.

How Color and Web Design Lead to Conversions

Your website is one of your strongest assets for supporting the customer journey. Anything that can be done with web design to encourage conversions is a plus. Using the right color, at the right time can help this happen.

This starts by considering the power of color when creating your brand image. For example, red is associated with excitement, confidence and vitality. Brands like Target and Coca-Cola have had great success with this color. On the other hand, blue is the color of trust – which is probably why IBM, PayPal and Facebook choose it as their primary branding color.

What type of emotion are you looking to spark with your customers? How do you want them to feel about your brand? Your brand’s colors are going to be infused throughout your website, so answering these questions as early on as possible is key to success.

Next, conversion success with color is about knowing when and where to use it. A children’s birthday party planner is going to want to use a bright, colorful theme to encourage interest and eventually conversions. The same color scheme would likely fail for a high end cosmetic company whose core audience is looking for colors that represent luxury and sophistication.

Finally, think about where to use color in your web development. For instance, red is a high performing color for CTAs, especially for urgent or impulse driven purchases. But black can be equally conversion worthy if used in the right setting, especially when targeting an audience that’s primarily male.

Work with an Experienced Web Design Agency

Would you like to know more about how the right use of color can increase your conversions? Our web developers are experts in color optimization. Contact Double Up Digital and speak with a website design company that knows exactly how to create a beautiful web design that delivers your brand and generates conversions.

Of all the efforts you put into building a presence online, it’s your web design that’s at the heart of your success. It’s the place where people get to know your business, and it’s the place where visitors become customers – at least this is the way it should be. If your website design isn’t delivering your brand, providing the ultimate in user experience and converting in the process, then it isn’t doing everything it’s capable of.

Web Design Tips For More Conversions

Fortunately, you can improve your site’s ability to convert by taking a few simple steps to improve its overall design and function. Here are 7 web design tips that will work fast to boost conversions.

Simplicity with Hick’s Law

Hick’s Law is a theory that states the amount of time it takes a person to decide is directly proportional to the number of choices they have. To use Hick’s Law to your advantage, keep simplicity a primary theme in your web development. Keep navigation simple, and break product menus into manageable chunks rather than endless lists of options. Giving the visitor too many options gives them time to reconsider their purchase altogether.

Go for Speed

When it comes to how fast your website loads, time isn’t on your side. The average visitor starts to lose patience after 2-3 seconds – basically the blink of an eye. If they lose interest before even entering your site because it’s slow to load, you’ve basically lost any chance of conversion. Making speed a priority is an easy way to boost your success.

Use Negative Space to Your Advantage

Negative space, which is all that beautiful blank space that helps the eye flow smoothly through your web pages, isn’t a negative at all. While the whole point of negative space is to have “room to breathe,” you can use this space to your advantage by placing an eye-catching, singular element – like a CTA in this space to grab even more attention.

Add Video

Well placed quality video is one of the most conversion worthy elements your site can have. Take for example, that using video on a landing page can increase conversion by 80%. Still, landing pages aren’t the only place video packs a punch. Try using full page video on your home page or including an explainer video on product pages.

Build in Your Brand

It’s important to use your branding, including your colors and logo, throughout your website. If you’re known for bold colors or design, this can be difficult to do while not visually overwhelming the visitor. Don’t worry, you can still work it in and have a site that encourages conversions.

Start by choosing prominent elements of your brand to weave through the site and then maintain consistency. For instance, select the strongest color in your branding and work it into every page. Use secondary colors for CTAs and other elements that need a punch of color to grab attention.

Use Quality Imagery

A picture is worth a thousand words, and a bad image can speak volumes and turn prospective conversions away. If you’ve been relying on low-quality stock imagery to boost the visual appeal of your site, this could be one of the reasons conversions are turning away. Invest in quality images and video, or if you must use stock photos, use ones that look professional, modern and match your brand image.

Contact a Professional Web Designer

Building a site that serves as a conversion magnet can be tough. Sometimes the most effective way of boosting conversions is putting your trust in a website design company that knows how to get the results you want.
We’re the web design company you’re looking for. Contact Double Up Digital today to learn more about our team of web developers and professional design services.

Animating your icons can keep the user engaged on your page and add to the value of the icon, allowing for more creativity to be displayed in a way that’s simple and fun. Adding multi-step CSS animations to SVG’s is easier than you think!

Let’s take a look at the example below. Seems pretty familiar right? While waiting for that next text to come in, you’re watching an animation. 

See the Pen Loading Symbol by Avery Williams (@averyhw) on CodePen.

This is a simple CSS animation to complete because there are only three parts to focus on. The more pieces there in your SVG, the more complex the animations will become and the more moving pieces there will be to consider. You may even have to involve some *gasp* math.

Creating these CSS animations usually involves a few more steps than people understand — all beginning with the SVG.

Getting started

For today’s example, I’ll be using our social media icon from the homepage. It best displays fluid multi-step CSS animations appearing to be in one animation together. Sure, you can copy the code below, but what fun would that be?

An SVG or scalable vector graphic allow pieces of an icon to be targeted through css for animation. The first step of created your new animated icon is designing it using Illustrator or another graphic design program than can export vector art as an SVG.

It is very important to make sure your layers are properly sectioned off and labeled with an intuitive name. Trust me, you don’t want to name everything thing1, thing2, thing3, because these names will become the ID tag of the piece in the SVG. Animating parts in an organized way will make it easier for you in the end. The more layers and groups you create, the easier it will be to animate through CSS. 

The next step is to export the artwork as an SVG and copy the code that is outputted. This can usually be done my clicking the “Show Code” option just before saving the SVG. The code it will spit out may look like the stuff of nightmares, but it’s actually all the little pieces of your icon broken down into coordinates and colors. Shapes are defined as familiar objects, such as lines and rectangles, and layers and grouped objects are labeled with <g> tags. 

Take this code and place it in your favorite code editor and organize it to your liking. Try to make sure all the groups, labeled with <g> tags are separated and together. This is more about me wanting organization, so you don’t have to follow it if you don’t want to — I’ll never know.

Separate out the inline CSS and place it into it’s own style sheet or SASS file. Now, we can start the magic!

Calling the animations

First, you need to call the animation and set its parameters. Target the element and define the animation. See below for an example.

#element {
	animation: [animation name] [animation timing] [animation style] [animation iterations count];
}

So…

#element {
	animation: animate 3s ease infinite;
}

W3Schools has some great explanations of all the options you can place in the animation’s properties.

Creating the animations

Now, we make the CSS animation. This is all done through keyframes, so a different step should be happening at different percentages of the animation. Since the animation we’re making here is 3 seconds, calling an animation to happen at 33 percent will calculate to one second in animation time. The more complex you want you animation to be, the more steps and percentages you will have to call.

Working with percentages in loops

Because you can only target one element at a time when calling an animation, all animations must be fired off at the same time and be the same length. Working around with the percentages is where the smoothness and fluidity of the animation come into play.

When looking at our social media animation, we can see that the dots are all doing the same animation, so why not write one and have them all start at different times through the animation delay property. This way, you don’t ever have to think about all of those percentages. This is an option, but means you will run into issues if your animation is looping.

If you were to set off every animation at a different, delayed time, then the animations would loop at different points. You would see the first dot begin to animate again while the last few are still in the middle of their own. To ensure that all animations are completed in the right amount of time and with the correct spacing in between them, you’ll have to time out the animations through their percentages.

Having one element animate from 0 percent to 10 percent and another from 10 percent to 20 percent and so on until 100 percent means they will all move and seem as though they are part of the same animation. I’m more of a visual learner, so I’m showing some of code from the loading symbol example below to further explain.

@keyframes load {

    0% {transform: scale(1);opacity: 0.8;transform-origin: center left;}
    25% {transform: scale(1.1);opacity: 1;transform-origin: center left;}
    50% {transform: scale(1);opacity: 0.8;transform-origin: center left;}
    100% {transform: scale(1);opacity: 0.8;transform-origin: center left;}

}

@keyframes load2 {

    0% {transform: scale(1);opacity: 0.8;transform-origin: center center;}
    25% {transform: scale(1);opacity: 0.8;transform-origin: center center;}
    50% {transform: scale(1.1);opacity: 1;transform-origin: center center;}
    75% {transform: scale(1);opacity: 0.8;transform-origin: center center;}
    100% {transform: scale(1);opacity: 0.8;transform-origin: center center;}

}

@keyframes load3 {

    0% {transform: scale(1);opacity: 0.8;transform-origin: center right;}
    50% {transform: scale(1);opacity: 0.8;transform-origin: center right;}
    75% {transform: scale(1.1);opacity: 1;transform-origin: center right;}
    100% {transform: scale(1);opacity: 0.8;transform-origin: center right;}

}

Notice how the first dot animates from 0 to 25 percent, the second from 25 percent to 50 percent and the third from 50 percent to 75 percent. The will sit still until their animation time and if all the animations are set to the same timing, they will look like they are part of the same animation. 

From zero to 100

It really all boils down to understanding how many CSS animations need to happen and then spacing those out between 0 and 100. If there are 10 animations and you want everything evenly spaced out, something needs to be happening every 10 percent of a keyframe. Let’s start with getting the dots to scale and return to normal in order. Each dot growing and shrinking is two keyframe events. There are 11 dots, so 22 animations to consider. I want them to move fast, so I’m setting them to each be 3.33 percent of the 3-second animation. This way, the growing and returning to normal will take up 6.66 percent of the animation’s time.

@keyframes pop {

    0% {transform: scale(1); transform-origin: 50%;}
    3.33% {transform: scale(1); transform-origin: 50%;}
    6.66% {transform: scale(1.2); transform-origin: 50%;}
    9.99% {transform: scale(1); transform-origin: 50%;}
    100% {transform: scale(1); transform-origin: 50%;}

}

It’s important to remember that you don’t want the next animation to start until the one before it is done, so the animation must not start until it’s time. This means setting the animation to do nothing until that time. Simply placing a 0 percent setting and the next animation percentage will cause the animation to start right away, but go at a slower pace. To have each animation take the same amount of time, you must have it start and stop at the right moments. This is why in the example above, the animation begins at 3.33 percent and continue until 9.99 percent before stopping. Adding the 0 and 100 percent definitions will make the animation sit still until its time to go. 

We will continue adding in the CSS animations this way, each one starting 3.33 percent later than the one before it.

And last, but not least, let’s add the like and bring it all together.

See the Pen oaNgjm by Avery Williams (@averyhw) on CodePen.

All in all, it’s a fun animation that will draw attention and keep the user engaged on your page. CSS animations can be a challenge to figure out, but the end result is like performing magic.

See the Pen Magic Wand by Avery Williams (@averyhw) on CodePen.

Happy animating!