Top 10 Tips and Tricks to Succeed in Video Content Marketing

The post 10 Tips to Help Video Content Succeed in 2021 first appeared on Webdesigner Depot.

3 septembre 2021/par Service comm.

How Illustration Adds Emotion To UX

From 45,000-year-old cave paintings to 21st-century space rocket diagrams, illustrations have long played a significant role in human communication.

Pictures cross-language and literacy barriers, allowing people to understand and communicate complex moods and feelings that they cannot in words. When we were little, we could understand and appreciate E.H. Shepard’s illustrations of Winnie the Pooh and friends long before we could read A.A. Milne’s words.

The word ‘to illustrate’ has two main meanings: to create a picture of; and to demonstrate or provide an example of. In the context of the web, illustration is part decoration, part emotional signal, helping to create a particular impression to the user by painting a metaphorical picture.

Why Use Illustrations on a Website?

Illustrations provide a useful shorthand means to convey mood or tone, the voice of a brand.

You could argue that icons are illustrations because they are pictorial, but they are symbols. Icons may, and usually should, fit stylistically with illustrations, but they are not illustrations themselves. A symbol is a simplified representation of an object, idea, or action. For example, ‘search’ is usually represented by a magnifying glass shape.

Illustrations, on the other hand, are more complex. They transmit an underlying emotional quality that connects with the intended audience. Illustrations can create a narrative about the subject without the need to add more text. It gives even the most basic, functional website a sense of personality when used properly.

Popular Types of Illustration Online

Illustration styles are many and varied, ranging from simple outlines to detailed, full color, realistic images. And the amount of illustration used varies greatly across sites.

Different styles evoke different feelings and provoke different responses, so it is important to think carefully when choosing an illustration style. There are two major factors to consider: what the site is for and what sort of character do you want to give it.

It is possible to break things down into broad categories to see what works best in different areas. We’re going to look at how designers can use illustration to good effect across four categories…

Financial & Corporate

Financial services, fintech, enterprise software, and larger corporate sites tend to use illustration as a way to humanize themselves.

The style tends to be minimal, using simple shapes and sparingly. Acorns uses a simple oak leaf motif to go with its acorn logo. Other illustrations are tied in by keeping to shades of green.

This creates a feel typical of newer companies (Acorns was founded in 2014), especially those that are primarily web-based.

Longer established, more traditional organizations use illustration for the same purposes, although they may be restricted to certain areas only, where they want to emphasize approachability. Danske Bank, for example (founded in 1871), has illustration on its corporate site in the ‘About’ and ‘Sustainability’ sections.

Visa also limits illustration to a specific area, the section on Visa Direct. This has the effect of separating this particular (newer) service from the rest of what Visa offers.

Another increasingly popular approach in this category is abstract graphics. This is particularly useful when it is difficult to show what is being promoted. For example, Instabase adds arrangements of geometric shapes for visual interest, using the same color palette as the site icons.

One of the key points with illustration in these types of sites is getting the balance right between friendly, human and approachable on the one hand and serious, trustworthy, and secure on the other. Get too cutesy, and potential customers won’t take you seriously. Github’s enterprise page does have some illustration, but the color is less vivid, and Octocat is only alluded to, unlike the home page which is illustration-rich.

Food & Drink

Things get a little freer when it comes to food and drink. Styles vary much more, and the personality conveyed can be stronger and more individual. Some still go for a light peppering of illustration, with aspects such as color and type made stronger, while in other cases, the illustration becomes much more prominent.

Palais Kitchen and Caleño both do the former, with brand-appropriate line drawings.

My Drink’s vintage-style animated illustrations take the place of photographs to balance the text on its home page.

Melopeion Honey doesn’t use very many illustrations, but what it does use is large.

Monkey47 could be described as a concept website, and the illustrations play a key role. (The social media menu is really rather charming.)

Hospitality & Leisure

In this category, what users really want to see is photographs, but illustration can help too. A photograph can only show what something looks like, while illustration can add the extra emotional dimension connected to an experience.

At the minimal end of the scale, Protos Car Rental uses some nice, simple illustrations to emphasize the holiday aspect of its business.

Comptoir Libanais blends photographs with illustration to create a very distinct identity.

Hotel Frida is also about character, and the victorian-style fantastical animal illustrations help create a quirkiness.

Highcourt uses simplified and stylized layout illustrations to give a complete overview of the building’s interior than photographs could.

The Neverlands doesn’t just use illustration; the whole site is an immersive experience based on illustration.

The Responsible Web

Sites promoting ethical and or sustainable companies, natural skincare, natural and/or organic food and drink, vegan products, social responsibility, and so forth tend to rely heavily on illustration, particularly if they are reasonably new.

Quite often, this is in the form of plant drawings that make a lazy allusion to nature, but it can also involve conveying information in a way that doesn’t come across as lecturing.

Wild Souls steers clear of any hint of hippiness, with a sense of randomness to its illustration placement.

Superfood Gin does the plant thing, but it is in reference to the botanical ingredients here, so it is very relevant.

Capsul’in’s main company page is a fairly standard offering, but for its Zero Impact product, it has a separate section with illustrations to help explain the product’s features.

Donate Responsibly uses illustration to explain how well-meant action can be inadvertently damaging without appearing to scold or patronize.

A variety of children’s brands will use illustration — even when it is parents or guardians who are really the target — and Little Yawn Collective combines the child-friendly, and natural product approaches with its sleepy animal illustrations.

Using Illustration on The Web

Illustration can be a powerful tool in a designer’s arsenal, but it can be difficult to get right because it invokes emotion, and emotion is subjective.

Just like type or color, it needs to be used appropriately and with care. Sometimes less is more, and sometimes getting the placement absolutely right can make the difference between a successful design and a flop.

This is just a selection of the wide range of illustration styles and usages out there on the web, but we hope it will give you a starting point when you are considering whether and how to use illustrations in your next project.

The post How Illustration Adds Emotion To UX first appeared on Webdesigner Depot.

1 septembre 2021/par Service comm.

7 Essential Design Tips for a Killer “About Us” Page

Creating an incredible brand experience for an end-user is about more than just designing the right home page or lining up a series of great product pages.

Effective website design conveys crucial information about a company, through everything from font styles, to image choices. Nowhere is this representation of brand identity more important than on the about page.

People frequently confuse the about page with the contact page or fail to leverage it correctly simply because they don’t know what to say. However, creating an about page that speaks to an audience can be immensely powerful.

What is an About Page?

The first step in designing a great about page is understanding the purpose of the space. This isn’t just a page on a website explaining what a company does.

The about page is an introduction to a company’s story, its brand essence, and personality.

Done correctly, this page will demonstrate a crucial sense of affinity between a business and its customers. It will highlight values that resonate with a customer and make it easier for clients to trust businesses.

The Yellow Leaf hammocks company starts its about page with a video.

As you scroll through the interactive site, you discover new elements of the company’s tale, including what prompted the birth of the business to begin with and the brand’s mission.

Yellow Leaf lets its visitors know what the company is all about by using authentic images of real people to external content and bold quotes.

There are even snippets from customer case studies for social proof.

About pages are relevant because they give customers a way to build a real human connection with a business. Harvard professors say that 95% of purchasing decisions are emotional; we don’t buy things just because we need them. Instead, we look for companies that we feel connections with to solve problems.

Using an about page to convey an attitude, personality, or just what makes a business special is how designers can ensure that end-users will care more about the business.

How to Make an About Page Stand Out

So, how do you make an about page stand out?

Since every company is different, there’s no one-size-fits-all strategy for everything. However, there are a few essential steps to consider as you move through the design process.

Here are some pro tips for successfully attracting attention with the about page…

Step 1: Decide What to Include

It’s tempting to assume that a complicated about page will lead to a stronger relationship between a brand and its customers. After all, the longer the story, the more the customer knows about the company – right?

While it’s essential to include plenty of valuable information in an about page, it’s also worth remembering that today’s customers are short on time. They don’t want to spend hours scrolling through one part of a website. Instead, they want access to quick, convenient snippets of information.

The Joseph Payton about page is effective because it cuts the story down into bite-sized chunks. Each piece of information highlights valuable insights for the customer. Plus, hand-drawn images and animations make the experience feel like you’re getting to know Joe on a deeper level.

Before you begin designing, ask yourself:

How much text does the page need? How much space does there need to be for copy? How can you spread the content out in a visually engaging way?
What sections should the page include? For example, does there need to be a link to the contact us page or a contact form somewhere?
How does the page connect to the rest of the website? For example, can you link to things like case studies and reviews with quotes to tie more of the website together?

Step 2: Make the Mission Statement Clear

In a world where emotion influences buyer behavior, clients and customers want to buy from companies they believe in. It’s not enough to have the right product or price point anymore. People want to know that they have a human connection with a business.

On some about pages, it’s difficult to pinpoint the real mission of the company. It seems like you have to scroll through endless paragraphs of text to make your own assumptions about what matters to the company. However, a well-designed about page puts this crucial info front and center.

For instance, on the Apptopia about us page, the subheading tells you everything you need to know about the brand. This heading instantly tells the audience whether it’s worth reading on to find out more.

The best about us pages often include a lot more than just a single sentence of text. But it’s worth pinpointing some of the essential details from these pages and drawing extra attention to them. A larger font or a different font color could be perfect for this purpose.

Alternatively, if it’s difficult to refine the company’s mission down into one message, it might be worth creating a whole segment at the top of the page dedicated to this information. That’s what the Toms shoe company does.

Step 3: Invest in the Right Trust Elements

People aren’t always sure who they can trust these days.

There are millions of websites out there and billions of companies. Not all of them are going to appeal to every customer. Since an about page is all about making a crucial human connection between a business and its client, it’s important to implement as much trust as possible.

The good news is that there are many trust elements you can embed into an about page to make it more reputable. Star ratings taken straight from companies like Trusted Reviews and Google are a great way to show that a company is already impressing its followers.

Quotes plucked from your customers or segments of case studies that you can place throughout the About Page copy is another great way to show your authenticity.

You could even take the same approach as Aja Frost here and embed genuine data and graphs into the about page.

One particularly helpful way to make a website’s about page more trustworthy without eating up too much space is to implement trust stickers. Badges that show all the right groups and regulators approve a company are a great start.

Even showcasing the logos of companies that the business worked for before on a slideshow could be an excellent opportunity to add depth to their authority.

Step 4: Convey Brand Personality

Brand personality is reflected in the tone of voice that a company uses for its content. You can see a company’s personality in the choice of colors it has on its website. It’s in the fonts that convey a message, and the videos, images, and other unique strategies that each business uses.

Although a brand personality needs to shine through in everything the company does, it’s imperative on the about page. This is the environment where a customer is getting to know a business for the first time. As a result, the consumer should instantly recognize what kind of brand archetype they’re working with.

Take a look at the Eight Hour Day about page, for instance. The first thing you see is a picture of two people laughing. That means you instantly get a sense of friendliness.

As you scroll through the page, you’re greeted by friendly, informal copy combined with bright colors and snippets of useful information. Everything feels comfortable and reassuring.

When you reach the bottom of the page, you find a bunch of data that makes the company seem more trustworthy. There are links to its social media pages and a partial client list showcasing brands like JCPenny, Wired, and Purina.

Using the right combination of font, copy, and imagery, this About page tells you exactly what to expect before you begin interacting with the company.

Step 5: Take Visitors on a Journey Through Time

Showing customers where a business is going with things like brand mission statements and values are great. However, it’s also worth giving people an insight into where a brand has already been.

Many of today’s shoppers aren’t comfortable buying from brands that haven’t spent much time in their chosen industry. They want to see that the people they’re working with have experience, heritage, and plenty of background knowledge.

What better way to demonstrate all of these things than with a timeline of accomplishments? Here’s an example of how Marshall showcases its history by mentioning various crucial historical milestones.

A timeline of events doesn’t have to be this complex, however. If you don’t want to overwhelm visitors with a wall of text, an actual timeline that offers quick and easy insights into what the business has done over the years could be a better option.

Another option could be to have a few key statements from the company’s timeline, then link out to a separate “History” page for people who want to find out more.

Step 6: Show the Human Side

People don’t buy from businesses; they buy from other people.

An about page isn’t just a chance to show customers what a company does. It’s also an introduction to the people behind that organization. Showcasing the team members that contributed to the growth and continued development makes that organization more attractive.

Obviously, if there are hundreds or thousands of employees in a team, you might not be able to mention them all on an about page. However, the page should generally include some insights into the c-suite and significant members of staff.

A selection of company photos is a good way to introduce your team. However, you can consider other options too. For instance, to maintain their unique brand, the Tunnel Bear team designed to draw their own bear icons that represented their personalities.

The design is adorable, and it’s a wonderful way to showcase what makes the company so unique. At the same time, using this kind of illustration means you can avoid the hassle of trying to get all of your business photos to look consistent.

Step 7: Show Values with Visuals

Finally, as we’ve mentioned frequently throughout this guide, an about page is an essential place to showcase the values of your business. These are the core principles that guide you in everything that you do. They help tell customers what matters most to you and prevent you from moving in the wrong direction.

However, you’re not restricted to highlighting your values through copy and nothing else. You can also introduce customers to the things that matter most to you through visuals too. Graphics or illustrations that highlight important aspects of your business are a great way to share information without relying too heavily on text.

Videos are another brilliant option, particularly if you have a lot to say but not a lot of time to say it in. That’s what Ben & Jerrys does.

You can also find a stream of “issues” the company cares about on the website too. This means that people can get more information on things like Democracy, Racial Justice, Fair trading, and what Ben & Jerry’s is doing about all of those things.

Visual elements like this are a great way to give an about page more pizazz. Plus, they appeal to people who want to learn about your company but don’t want to spend forever reading through the text.

Create Better About Pages

An about page shouldn’t be an afterthought.

It’s a crucial part of showcasing a company’s unique style and personality. Used correctly, these pages convey crucial information about everything a business stands for.

Use the tips above to give more meaning to your about page design, and remember to pay attention to how much your traffic and conversions evolve with every update you make. A better about page could even help you to drive more conversions.

The post 7 Essential Design Tips for a Killer “About Us” Page first appeared on Webdesigner Depot.

25 août 2021/par Service comm.

Quick Ways to Make a Webpage More Scannable

In the information age, time is a valuable commodity and something people don’t want to spend too much of. As a result, the average visitor only reads about 20% of the content of a page.

For web designers and developers, that means a few things: first, you need to ensure that the web pages you create are as engaging as possible; secondly, you need to find a way of making the critical information on any page stand out; thirdly, every modern designer needs to create assets that are easy for today’s fast-paced customers to use.

Making websites more scannable is how you do your part as a designer to ensure that the customers who come to a page get the quick and convenient experiences they need.

So, how do designers embrace scannability?

Designing for Scannability: An Introduction

At first glance, the concept of creating a website for scannability is strange.

Most designers start their projects with the aim of making customers stay on a page for as long as possible. So it’s odd to think that you would want to make it simple for end-users to skip from one page to another on a website in a matter of seconds.

However, scannability isn’t just about delivering information and getting users off a page. When sites are scannable, they make it quicker and easier for customers to slide down the purchasing funnel. A quicker and more convenient customer journey leads to a stronger user experience and more conversions.

Look at Netflix, for instance. It doesn’t give interested users a ton of information on its homepage. Instead, the key USPs of the product are laid out bright and bold in the middle of the screen, along with one simple call to action: Get Started.

Designing for scannability means making it easy for users on a page to glance at a screen and instantly access all the information they need to take the next step in their buyer journey.

There’s no needless scrolling or wondering what to do next.

According to analyst Jacob Nielsen, scannability is essential because people look for specific things on every page they visit.

Customers don’t read through web pages word by word. Instead, they scan through the content, plucking information out that serves their requirements.

Questions to Ask When Designing for Scannability

So, how do you know if your web pages are scannable?

Start by asking the following questions:

What’s the intent of the people who arrive on this page?
What kind of information needs to be conveyed instantly?
Can the visitor see the next step in their journey immediately?

For instance, when someone arrives on the Evernote homepage, you can assume that they want to:

Find out about Evernote
Learn how to sign up
Jump to other pages to find out about features, and contact details

That’s why the designer behind the Evernote website placed an immediate piece of useful information at the top of the page: “Tame your work, organize your life” tells customers exactly what the entire product is all about. The brief paragraph of information underneath can provide a few more details if customers need it, then there’s an immediate call to action: Sign up for free.

Not only does the call to action tell users what to do next, but it tells them the most important information they need straight away: it’s free.

Scannable pages like this are useful because:

They help users complete their tasks quicker: Whether you want to sign up or learn more about the product, everything you need is available instantly, with no scrolling required.
The bounce rate is reduced. Customers don’t get confused and hit the back button. That’s good for your client’s SEO and their bottom line.
The website looks and feels more credible: Because customers get all the answers to their questions immediately, they’re more likely to trust the website.

So, what are some of the best things you can do to make your sites as scannable as possible?

Use Visual Hierarchy

Visual hierarchy is a way of organizing the content on your website in a way that adheres to how people use the website. For instance, if you land on a blog page, you expect to see the headline first, maybe some information about the writer, and any other essential information, followed by the body content.

Although it’s tempting for designers to try and surprise users with new visual strategies, the best way to make your content more scannable is to give end-users precisely what they expect.

If you’re not sure what a page should look like, try checking out the competition.

One of the most obvious visual hierarchy rules is that the main navigation should always go at the top of the page.

Customers will expect to look at the top of the page to find navigation. They don’t want to have to scroll through your website, searching for a way to get to another page. If you want to make it as easy as possible for end-users to jump from one page to another, you can pin the navigation bar to the page so that it stays with users as they scroll.

Maintain Negative Space

White space, negative space, or whatever you call it – is the part of your design that’s left empty.

White space is crucial because it gives all of the objects on your page some much-needed breathing room. Without enough negative space on your pages, it’s impossible to embrace scannability because there’s too much information for a customer to take in at once.

For instance, notice how there are big gaps of space between every element on a Forbes website post. A proper amount of negative space on your site ensures that users can quickly take in chunks of information and use that information to decide what to do next.

To ensure there’s enough negative space on your website pages, ask yourself what the key elements visitors will notice when they come to a website. The essential items should be:

A title or header to confirm that the user is in the right place
A CTA that shows your user what to do next
A navigation header or menu
Critical information includes an introduction to what a page is about or an excerpt from the blog post they’re about to read.
A visual component: A picture or image that gives context to the page.

Anything else can usually be removed. So, for instance, if Forbes wanted to make the page above more scannable, they could easily remove the ads and social media sharing buttons.

Make the Next Step Obvious

Every page on a website exists in a hierarchy within the customer journey.

A homepage leads customers to product pages, which leads to a checkout page, which connects to a thank-you page that sends the visitor back to another product page, and so on.

When designing for scannability, it’s crucial to make the next step in the journey as obvious as possible. Usually, this means placing the call to action “above the fold,” where the customer can see it immediately.

Ideally, scannable pages should have just one CTA. This will stop your audience members from being confused or overwhelmed by choice.

However, if you’ve got multiple CTAs, think about the average customer’s journey and what they’ll want access to first.

If those buttons don’t appeal to the customer, they can scroll a little further and see other “next step” options, like shopping for “self-isolation essentials” or browsing other popular product categories:

Test Every Page

Testing for scannability means examining every page and making sure that it’s as easy as possible for customers to move through the buying process as fast as they want to.

Visit each page you design in a buyer journey and ask how quickly it would take end-users to get from point A to point B and beyond. Here are some of the common issues that might slow the customer’s journey and harm scannability:

Readability: Is the font legible? Is it large enough to read on all screens, including mobile devices? Legibility in the design world measures how quickly and intuitively your users can distinguish what’s going on any page. Remember that the color of the background, the amount of negative space around copy blocks, and even font pairing can impact the readability of the content. Show your pages to multiple people and time how long it takes for them to grasp the message that you’re trying to convey.
Fluff: Fluff and extra features can make your pages more intriguing, but they can also slow users down. For instance, one picture at the top of a blog page can add context to the article. A slideshow of pictures stops the customer from progressing and keeps them stuck at the top of the page for longer.
Words instead of numbers: According to Nielsen, eye-tracking studies show that numerals often stop the wandering eye. Numbers are compact and more regularly associated with statistics and facts, so they’re more likely to grab attention. If you want to get important points across to end users fast, use numbers, not words.

Creating Scannable Pages

Scannability is becoming an increasingly important concept in today’s busy landscape.

Now that more customers are browsing websites from their smartphones or checking out products on the move, designers need to think more carefully about adjusting to this agile environment.

Scannable pages that move visitors along the buying cycle and into the next stage of the funnel will deliver better results for your clients, and therefore better outcomes for you.

The post Quick Ways to Make a Webpage More Scannable first appeared on Webdesigner Depot.

18 août 2021/par Service comm.

3 Essential Design Trends, August 2021

Sometimes the designs that make the most impact do a lot of unexpected things and break some of the most tried and true rules of visual theory.

Sometimes these design elements work brilliantly, and other times they are fleeting or fall flat. This month all of the examples here seem to break some conventional design rules. Here’s what’s trending in design this month…

1. Alternative Homepage Image/Video Crops

This trend breaks some traditional standards and is pretty refreshing – alternative homepage crops for images and video.

The full screen or 16:9 aspect ratio is out the window with vertical and square options that prove you can do more with your photo collection.

What’s great about this trend is that it’s super attention-getting because of the interesting use of space and imagery. Almost any design without the full-width hero header will grab your attention because it is different. These examples prove that point, and each design does it differently.

Now here’s the challenge: You have to make sure that this style has a solid fallback for mobile so that the result is equally impressive.

Janmaat Fotografie does a great job accounting for interesting photo shapes and flips the script on mobile. (Rather than what you might expect with text then photos because of the desktop placement, the photo stack uses the same shape and layering and is above the text on mobile.) The result is phenomenal.

N3 uses a very vertical image in an almost split-screen style design. It’s a sharp contrast to many of the other split screens we are accustomed to with an equal divide. The distinct shape of the image is interesting and intriguing. It’s definitely not a shape we see in website design frequently.

Bounce uses a similar split-screen effect in the opposite manner as the example above, with the tall, vertical space as an “empty” area and the right side filled with a square video. The shapes help push and pull your eyes across the screen to look at all of the elements and take in the overall design. It’s one of those ideas that if you only talked about it, you might talk yourself out of it, but here, it’s pretty striking.

2. On-Screen “Stickers”

Stickers are a design trend that has made its way from social media to website design.

These website stickers break design rules because they cover content or seem to be put on the canvas haphazardly. And that’s why they are so attention-getting!

The benefit to these stickers is that they can highlight specific items or content or help focus a call to action.

Friesday uses stickers in conjunction with hover effects to keep users interacting with the design. Multiple stickers can even pop onto the screen in the same location. The animation is simple and fun and feels like a digital sticker book.

August Eighth uses a center sticker as a call to action. It’s a true focal point in the center of the screen with an almost three-dimensional effect that lifts it off the background video. It’s a borderline dark pattern since the only way to get the box off the screen is to click through to the shopping part of the website.

EasyGreen has a bright yellow sticker in the bottom corner that feels almost like the sticker on a piece of fruit. This style and placement work well for the content and product featured. It’s bringing the digital and real-world a little closer with this design element.

3. Breaking Design “Rules”

The third trend this month is kind of a catch-all for general rule-breaking. While the other trends show certain design elements that aren’t the norm, each of these examples really tosses everything you traditionally think about design out the window. (And that’s ok.)

The trick to a rule-breaking design is that it has to be focused and simple enough to keep users interested and provide intuitive elements that tell them how to interact with the design. It’s a delicate balance.

Here’s how these sites do just that.

Supercontinent has a lot going on. At least four typefaces on the screen at a time, movement (using different shapes and aspect ratios), overlapping elements, hidden navigation, and you may even find a few more broken rules if you look closely. And somehow, it still works.

What’s pulling this design together is a key unbroken rule – the chaos is rooted in a grid system that keeps it all somewhat organized. Plus, there’s plenty of white space to keep elements from feeling crowded and overwhelming.

Source of Plastic Waste combines elements in unexpected ways. There’s no real navigation; the site is just a continuous scroll. That’s a big website usability rule broken right out of the gate. There are other design elements as well, from the “header”/logo moving to the top right corner to the almost over-designed transparent box for text elements. There are a lot of scroll elements and actions happening and layers of text on text in some of the screens.

But here’s the thing about this design. As many rules as it breaks, the story is interesting enough to keep you scrolling. The question is, how long and how far do you go without getting lost or confused.

The Debris of Attention is designed to show “bad design” with elements that are frustrating and annoying on websites. The gamified design allows you to hover on each element to remove it and clean up the design.

While this site breaks the rules on purpose, it is still an experiment in how long a user will hang on with so many visual effects happening at once.

Conclusion

While most of the time, people think about “breaking the rules” as a bad thing, that’s not always true in the design space. Sometimes breaking the rules can result in an unexpected delight.

The challenge is to make sure that when you break the rules, the design is still usable, functional, and understandable. If so, you’ve found a winning combination.

The post 3 Essential Design Trends, August 2021 first appeared on Webdesigner Depot.

2 août 2021/par Service comm.

Making Your Mark: 6 Tips for Infusing Brand Essence into Your Website

What makes a company special? There are hundreds of organizations out there selling fast food, but only one McDonalds. You’ve probably stumbled across dozens of technology companies too, but none of them inspire the same kind of loyalty and commitment as Apple. So why do people fall in love with some companies more than others?

Most of the time, it comes down to one thing: brand essence. Your brand essence, or brand identity, represents all of the unique components of your business that separate it from the competition. It’s not just about your logo or the brand colors you choose for your website. Your brand essence entails all of the visual assets you use and those less tangible concepts like brand values and personality.

When your customers decide which companies to buy from, they’re not just looking for another dime-a-dozen venture with the cheapest products. Instead, your audience wants to buy from a business that they feel connected with. That’s where your brand comes in.

Infusing brand essence into your website helps give your digital presence that extra touch that differentiates you from other similar companies.

So, how do you get started?

What is Brand Essence?

Your brand essence is a collection of core characteristics responsible for defining your brand. More than just a single asset, your essence encompasses everything from your unique tone of voice, from your brand image, your message, and even what you stand for.

More than just a single asset, your essence encompasses everything

When you’re trying to boost your chances of sales, a brand essence helps build a kind of affinity with your customers. Your clients see aspects of your character that they can relate to, such as a modern and playful image or a commitment to sustainable practices. It’s that affinity that convinces your customer to choose your company instead of your competition time after time.

Your website is one of the first places that your customer will visit when looking for answers. They might happen across your site when searching for a key phrase on Google or stumble onto it from social media. When they arrive on your product or home page, everything there should help them make an immediate emotional connection.

The only problem?

It’s challenging to portray a unique brand identity through a standard website template. If your site looks the same as a dozen other online stores, how can you convince your customers that you’re better?

Why Your Website Needs Brand Essence

First impressions are a big deal.

In a perfect world, your visitors would land on your website and instantly fall in love with what they find there. So everything from the unique design of your homepage to the pictures on your product pages should delight and impress your audience.

Unfortunately, if just one element is wrong, then you could also make the wrong impression entirely on your customers too. Adding elements of brand essence to your site will:

Build trust with your audience: Your brand should be a consistent component of everything your business does, from selling products to interacting with customers. When your consumers land on your website, everything from your logo to your chosen colors should remind them of who you are and what you stand for. This consistency will lead to better credibility for your business.
Make you stand out: How many other companies just like yours are on the internet today? Your brand essence helps to differentiate you as special by showing what’s truly unique about you. It’s a chance to remind your audience of your values and make them forget all about your competitors.
Create an emotional connection: Brand essence that shows off your unique values, mission, and personality will help create an emotional link with your audience. Remember, people fall in love with the human characteristics behind your brand!

Easy Ways to Add Brand Essence to your Website

Since there are so many elements that add up to a strong brand essence, there are also a variety of ways you can add your brand to your website. Whether it’s using specific colors to elicit an emotional response from your fans or adding your unique tone of voice into content, there’s no shortage of ways to show off what makes you special.

1. Use Your Brand Colors Carefully

Brand colors are an important part of your brand essence. Walk into Target, and the bright shades of red will instantly energize you. Likewise, when you see a McDonalds, that golden arch logo might instantly remind you of joy and nourishment.

Color psychology plays a significant role in every brand asset you create, from the packaging you choose for your products to the shades in your logo. With that in mind, you should be using your colors effectively on your website too. Stick with the same selection of shades in every digital environment online.

For instance, the Knotty Knickers company uses different shades of pink and white to convey feelings of femininity and comfort. Not only is the website packed with this color, but the company also follows through with similar shades on its social media pages too.

Everything from the highlights on the Knotty Kickers Insta to the decorations in their images feature the soft tones of pink that make the company recognizable.

Remember, consistent use of color is psychologically proven to help improve recognition by up to 80%. So let your colors shine through.

2. Know Your Type

Your colors are just one component of your brand essence.

Fonts and typography are other components that your customers use to recognize and understand your business. There are many different styles of font, and new ones appear all the time. However, your company should have a specific selection of fonts that it uses everywhere.

If you have a typeface logo, then you might have one specific kind of font for this, like Original Stitch’s logo here:

On top of that, you may also use one font for the “heading” text on your website and something slightly different for the body text. Your heading and body text need to be extremely clear and easy to read on any device if you want to appeal to your target audience.

However, there’s more to getting your fonts right than choosing something legible. The fonts you pick need to say something about your company and what it stands for. For example, the modern sans-serif font of Original Stitch’s website conveys a sense of forward-thinking cleanliness and style.

The fonts feel trendy and informal, perfect for a luxury fashion company. Alternatively, a serif font like Garamond might look more formal and professional. So what do you want your customers to think and feel when they see your typography?

3. Know Your Images

Stock images look out-of-touch, cliché, and fake. If you cover your website in images like that, then you’re not going to earn the respect of your customers. Instead, it’s up to you to ensure that every graphic on your website conveys the sentiment and personality of your brand.

Bringing your brand essence into your website design means thinking about how you can convey your values in every element of that site. From the photos of your team that show the real humans behind your products and services to the pictures that you use on your product pages, choose your graphics wisely. If you have dedicated brand colors, you can even include these in your photos.

Of course, the most valuable graphic on your website should always be your logo. This is the thing that you need to include on all of your website pages to ensure that your audience knows who they’re shopping with. So ensure that no matter how much visual content you have on your page, your logo still stands out.

Firebox places its logo at the top of the page in the middle of your line of sight, no matter where you go on the website. This ensures that the logo is the thing that instantly grabs attention and reminds consumers of where they are.

Remember to ensure that each of the images you do include in your website is surrounded by plenty of white space so that your customers can see them properly too.

4. Use the Right Tone of Voice

It’s easy to get stuck focusing on things like logos and colors when you’re trying to make your brand essence shine through in your website. However, one of the most common things that your customer will recognize you by is your tone of voice.

Your brand tone of voice is what gives the content you share online personality and depth. It can come through in the kind of words you use, including slang and colloquialisms. In addition, you can add humor to your voice (if it’s appropriate) and even include emojis if that makes sense for your brand.

With formal words, you can make sure that you come across as reliable, dependable, and sophisticated. With informal words, you’re more likely to convince your audience that you’re friendly and relatable. Sticking with the Firebox example, look at how the company writes its product descriptions.

Everything from the length of the sentences to the humor in the tone of voice helps to convey something unique about the brand.

Like all of the elements that bring your brand essence into your website, your tone of voice must remain consistent wherever your customers see it. Make sure that your customer service agents know how to use your voice in chat with customers and that you include that personality on social media too.

5. Focus on Your Message

The tone of voice and personality that you showcase in your website and content is crucial to driving success for your business. However, under all of that, the most important thing to do is ensure you’re sending the right message. In other words, what do you want your customers to think and feel when they land on your website?

If your whole message is that you can make great skincare easy to obtain without asking people to compromise on animal safety, this should be the first thing that comes across when someone arrives on your homepage. That’s why Lush combines clean, simple web pages with credibility-boosting badges that tell customers everything they need to know instantly.

Ensuring that your message can come across correctly means learning how to use all the different brand assets you rely on consistently and effectively. Everything from the colors on your website to how you place trust badges along the bottom of every page makes a difference to how significant and believable your message is.

Notably, when you know what your core message is, it’s important to repeat it. That means that you don’t just talk about what your ideals and values are on your homepage. You also include references to your message on every product page and the “About” page too. Lush has an entire “ethical charter” on its website, where you can learn more about its activities.

Having a similar component included within your web design could be an excellent way to confirm what your most crucial considerations are for your customers.

6. Never Copy the Competition

Exploring other website designs and ideas created by your competitors is one of the easiest ways to get inspiration. Competitive analysis gives you an insight into the trends and design strategies that are more likely to work for your target audience. It’s also an opportunity for you to learn from your competitors’ wrongs and what they’re doing right.

However, it would be best if you never allowed your initial research and exploration to go too far. In other words, when you see something great that your competitor is doing, don’t just copy and paste it onto your own website. This is more likely to remind your customers of the other company and send them to that brand than it is to improve your reputation.

Instead, focus on making your website unique to you. If you’re having trouble with this, then start by looking at your About page. How would you describe your background and your mission as a business to someone who has never heard of you before? What makes your company different from all of the other organizations out there?

Take the unique features that you rave about on your About page and the personality you try to convey through your employees and bring it into the rest of your website design. The whole point of bringing brand essence into your web design strategy is that it helps to differentiate you from the other companies out there.

It’s a good idea to protect any assets that other people might try to steal from you too. Copyrighting your logo, your name, and other essential components of your brand will stop people in your industry from treading on your toes too much.

Make the Most of Your Brand Essence

Your website is one of the most valuable tools that you’ll have as a brand. It’s an opportunity for you to share your products and services with the world, capture the attention of your target audience, and potentially make sales too. However, it’s important not to forget that your website is also a chance for you to demonstrate what your brand is truly all about.

Through your brand essence, you can share the unique values and messages that make your company special. But, more importantly, you can use those components to build a deeper relationship with your audience – the kind of connection that leads to dedicated repeat customers and brand loyalty. People connect with other people – after all, not just faceless corporations.

Once you’ve identified your brand essence, the next step is to make sure that you know how to connect with your customers consistently. Every aspect of your website, application, social media pages, and anything else you make for your business sends the same message.

The post Making Your Mark: 6 Tips for Infusing Brand Essence into Your Website first appeared on Webdesigner Depot.

22 juillet 2021/par Service comm.

Exciting New Tools for Designers, July 2021

The dog days of summer are here. From vacations to pool time, you might not be thinking about work that much. But there are still plenty of new tools and resources popping up to help you become a better or more efficient designer.

Here’s what new for designers this month.

Haikei

Haikei is a web app that you can use to generate SVG shapes, backgrounds, and patterns in a web-based editor that you can use with any design tool or workflow process. Everything is customizable and it is free with access to 15 generator functions. (Additional templates and generators will be available when the pro plan is released later.)

Pixelhunter

Pixelhunter is a smart image resizer for social media platforms. It recognizes objects and crops pictures automatically. It supports 102 sizes and is free to use.

Compo

Compo is an Apple app that allows you to play with shapes and colors and create compositions on your own. You can see shapes and colors like the Bauhaus masters, creating from a blank canvas or shuffling in more creative ways. You can move, rotate, copy, overlap, and adjust shapes and colors to suit your style. Available for iPad and iPhone.

Backlight

Backlight is an all-in-one design system platform that allows you to build code and reference sites in a space where designers and developers can work together. It has a series of “starter kits” to help you with the technology you use from React to Chakra to Tailwindcss. It’s designed to be collaborative with everything in one place and integrates into your workflows. The tool is just launching and you can request early access to learn more.

Multi Color Text With CSS

Multi Color Text With CSS is pure fun. Check out the pen by Shireen Taj.

Mega Creator

Mega Creator is an online graphic design tool that helps you create images, icons, illustrations, backgrounds, and more for a number of uses. It has templates that are sized for common uses such as social media. You can upload your own elements to work with (free) or use including graphic assets for a fee.

Noloco

Noloco is a no-code solution for designers to build web apps. You can start building for free and design almost anything you can dream up from a set of drag-and-drop ready-made blocks. (And it will work across all screen sizes.)

Tinter

Tinter is a tiny web tool to generate color variations of images. The tool also generates monochrome colors of images with multiple variants, without hampering the quality of the image.

Radix Colors

Radix Colors is an accessible, open-source color system for designing gorgeous websites and apps. It includes 28 color scales with 12 steps each and includes support for dark mode as well as matching transparencies.

WP Cost Calculator

WP Cost Calculator is a smart, simple tool that allows you to easily create price estimation forms. It’s perfect for a number of industries that use online pricing.

TraveledMap

TraveledMap allows you to create customizable maps thanks to the use of markers, routes, and photos, which you can share or add to your website or blog. This tool is made for travelers and tourism pros.

Glyph Neue Icons

Glyph Neue Icons is a collection of 1,500 icons in SVG and PNG format. (They are free with a link.) Icons come in plenty of categories and styles for all types of use.

Streamline Icons

Streamline Icons is a set of thousands of icons in 12 different styles and themes that you can use for projects. They work through the Streamline app or a plugin for Figma, Sketch, or Adobe XD.

Health Icons

Health Icons is a set of free, open-source health icons for personal or commercial projects. They include filled and outline styles that are editable. There are more than 800 icons in the collection.

OMG, SVG Favicons FTW!

OMG, SVG Favicons FTW! Is a look at the benefits of using SVG favicons in web projects. It also examines some of the challenges – such as browsers support – with code snippets to help you get started.

Aspect Ratio in CSS

Aspect Ratio in CSS explores a design concept we talk about a lot in other places, but not so much with CSS. This piece by Ahmad Shadeed takes a look at how you can go beyond the “padding hack” and use native aspect ratio support in CSS to maintain image height and width ratios in responsive design.

Fight Kick

Fight Kick is a bold font with a lot of personality. The free demo version has 249 characters and is for personal use only.

Glow Better

Glow Better is a beautiful premium typeface with a pair of options – a serif and script. Both contain letterforms with swashes and tails that are delightful.

Huggable Hedgehogs

Huggable Hedgehogs is a playful font that’s perfect for children’s projects. Everything has a mono-height in the all uppercase typeface.

Monice

Monice is a rounded sans serif with thick lines and high readability. It includes bold, regular, and italic styles with free (demo, personal) and commercial options.

Rustica

Rustica is a robust premium typeface with 20 styles and family options. It has slim curves and an easy-to-read character set that would work for almost any use. It also supports 219 languages.

The post Exciting New Tools for Designers, July 2021 first appeared on Webdesigner Depot.

12 juillet 2021/par Service comm.

How to Write a Press Release: The Complete Guide for 2021

Actualités, Actualités, SEO

A press release is one of the most valuable tools in a marketing team’s arsenal. Though press releases have been around for decades, they remain one of the best ways to reach new customers, improve your brand reputation, and generate awareness.

Press releases are also wonderfully cost-effective. Unless you’re using paid distribution channels, all you have to spend is your time to create your press release.

So, how do you get started?

What is a Press Release?

A Press Release is a short, simple, and compelling news story designed to promote the goods and services of a business. You’ll usually see these pieces of content published on industry websites, news channels, social media platforms, and even on the company’s blogs looking for awareness.

The idea behind a press release is you provide a publication or group with all of the most valuable facts and insights into your latest newsworthy story. You might use a press release to announce a new product or to tell people about your recent partnership, for instance.

A press release post then delivers this information to a wider potential audience by distributing the content in a range of different places.

Why Should My Business Send Press Releases?

Why not simply tell people about your latest products and sales on social media, and leave it at that? The simple answer is Press Releases help you to gain the attention you might not get from your own media channels alone. With a press release, you can:

Set the record straight: In the middle of a PR disaster, a Press Release can give people the information they need to make their own decision about who’s right.
To improve your brand reputation: Launching press releases through well-known publications immediately boosts your credibility. The right publication shows you’re well-connected and professional.
To gain media coverage: When launching a new product or service, a press release helps attract potential customers to your business and gives you more opportunities for sales.
To improve SEO: In the digital world, a press release allows you to earn backlinks from high-authority websites, improving your ranking.
To find new customers: Press publications and websites will reach a wider audience than you can find on your own. In addition, publishing press releases gives you new eyes on your business for minimal cost.

You can send a press release for various reasons, including announcing breaking news, talking about newly launched products, discussing upcoming events, confirming partnerships, and more. It’s also worth creating a press release when new people join your executive team when you receive an award, or even if something bad happens (for crisis management)

What’s Included in a Press Release?

A press release will include different information depending on what you’re trying to accomplish. In general, PR posts feature:

A headline: This is where you share the most important info of your story
Contact details: How the media can get in touch with you
Location: Where you are and where the news event is taking place
Body copy: Information about the news event
Quotes: It’s common to see quotes in a press release from high-level staff
Boilerplate: Insights into what your organization is about

How to Write a Press Release (Step by Step)

Now you know what goes into a press release and why these tools are so valuable, it’s time to start planning your big announcement.

Here are our top tips for creating an amazing press release.

1. Choose the Right Story

Press releases are focused on sharing valuable news with a specific audience. It would be best if you had something important and new to say, or you risk not getting your story published at all. You can’t just talk about a product or service that’s selling well (unless it’s breaking world, or brand records).

Think about whether your PR topic is:

Timely: Is the event you’re talking about just about to happen, or has it happened recently? If something happened weeks or months ago, press groups aren’t going to be interested. Aside from ensuring your message is timely, make it topical too. Ensure this story is going to give something valuable to your audience.
Relevant: Before you send a press release to anyone, make sure it will be relevant to the audience you’re targeting. Who does the story affect, and why is it important? What kind of benefits or opportunities will it deliver?
Unique: What’s unusual or unique about this story? You don’t want to comment on the same things that everyone in your industry is already talking about.
Engaging: What about your story is going to make readers stand up and take notice? Is there any trouble or tension you’re going to overcome? Look at this press release from Target as an example. How can you frame your story in a way that makes people want to learn more about your business?

When asking yourself what your PR story should be about, consider whether you want to publish it if you were a publication leader. From an objective perspective, does this story have value?

2. Answer the Right Questions

A press release doesn’t just provide information. Written correctly, this content will also answer essential questions for your audience. For instance, let’s take a look at the questions you should answer, with an example.

For this example, we’ll be looking at a social media marketing firm partnering with an SEO brand:

Who is doing this? What’s the name of the social media marketing firm and the SEO brand? Where do they come from? Which executives are involved?
Who is affected? This news would probably affect the stakeholders and shareholders for the business and the customers by providing access to new services.
What have the companies done? They’ve joined forces in a partnership, but which sectors and teams are actually going to be working together?
Where is this happening? Which area will these two companies now serve? Who will be able to access the service?
When did it happen? When is the partnership going to start when will customers see the first major changes?
Why has this happened? In this example, the why might be to offer customers more services and helpful products.
Why does this matter? Why is it so important that this event is taking place for your target audience? How are they going to benefit?
How will you be implementing this change? For example, if you’re partnering with a new business, will you change your brand name and leadership team? Will you have a new headquarters?

3. Target the Right Sector

Like most pieces of great copy, a press release should generally be written with a specific audience in mind. The interesting thing about a press release is that you’re not just writing for the people who might be interested in your products and services. You’re also writing for a specific publication, journalist, broadcaster, or editor.

When you’re writing your content, you’ll need to keep both audiences in mind to ensure that you get your message across. Focus on the kind of crucial messages which will appeal to your end-users and customers but address the preferences and needs of the editor too. Many publications will have guidelines to follow if you want a chance of getting your content on their site.

If you’re sending your press release to multiple locations, you might need to look into doing several different versions of your press releases, each with slightly different wording and information, based on your target publication.

4. Get the Headline Right

There are few things more important in a press release than an amazing headline.

A good headline will immediately attract the attention of your publication, as well as anyone who might end up reading your article. The media uses headlines to determine whether stories are worth reading or publishing. This means that you need to get attention quickly.

Most press release headlines don’t try to be clever. There isn’t a lot of fancy language to worry about. Instead, your focus should be on sharing the main point of the press release fast.

For instance, if you’re announcing the arrival of new security measures in your business to protect hybrid workers, you might have a headline like:

[Company] implements end-to-end encryption for hybrid workers
[Company] uses new encryption techniques to support hybrid work
[Company] invests in encryption technology for hybrid employees

5. Use the Right Structure

Structuring a press release can be tough.

Some companies have specific requests on how your press release should look. For instance, you might have to place the date and time in a specific place. For instance, CNN always puts the date of the release before the headline:

If you don’t have to follow a specific format, you should stick with the inverted pyramid structure. This strategy involves placing the most critical information first and moving down the hierarchy to less important info – like contact details.

When structuring your press release, make sure the headline immediately tells your customers and readers what the story is about and presents immediate value. The opening paragraph will then summarise the main factors and elements of the story, giving a fuller explanation of what the story is about. For instance, for the “[Company] implements end-to-end encryption for hybrid workers” example, the first paragraph might read:

[Company] recently announced an investment in the latest encryption tools for information at rest and transit for hybrid employees. This new security strategy is rolling out immediately to new and existing customers of [company], with access to extra features available for premium subscribers.

The second paragraph then follows up with contextual insight into why this story is important. For instance, in the example above, the second paragraph might say:

This new investment comes at a time when more employees are moving into the hybrid working model. [Company] believes that higher encryption is crucial for teams working in a cloud environment, even with access to VPNs and other security measures available.

The third paragraph then presents details on the story, including information on who’s involved, how this story came about, and anything else that business leaders might need to know. If there is an additional paragraph, you might include some quotes from business leaders or industry authorities to add credibility or opinions.

6. Perfect Your Writing

No matter how short or simple, any press release is an insight into your company and brand. Don’t rely on the publication company you choose to do all the editing for you. Make sure you proofread your content and ensure everything sounds fantastic. It’s also worth double-checking any details to ensure that stats and facts remain accurate.

When boosting the writing of your press release, remember:

Address the topics that your readers will find most interesting: Choose relevant topics with obvious benefits and repercussions for your target audience. Don’t get bogged down in fluff, and don’t be overzealous with patting yourself on the back. It’s best to avoid too many adjectives like “world-leading” and “fantastic” when describing your brand.
Write in the third person: Third-person writing is common for press releases, even when you’re talking about yourself. For instance, you might say, “Dell’s marketing team recently shared information on a new computer series.”
Keep it simple: Stick to one focus story per press release and try not to overwhelm your audience with too much information. Press releases are short, focused, and easy to read. If you have extra information to provide, you can make a note at the bottom of the release. The close of your PR is where you can provide contact details, links to products, and backlinks to further articles.

Remember, a compelling, human quote can really make a difference to your press release too. This is a chance to allow the executive voices in your business to shine through. Make sure you highlight exactly why you’re so excited about the press release in the quote while using emotive language to connect with customers. For instance,

The company CEO said: “We’re proud to be offering our current and new customers access to this new security service. After working with the best encryption professionals in the industry, we’re confident we can reduce data breaches and security concerns for hybrid workers.”

7. Double-Check Your Press Release

Before you send your press releases to anyone, it’s best to do a quick check to ensure that everything sounds great and that you haven’t left any annoying errors unaddressed. Use this quick checklist to examine your content:

Is the release date and publishing date correct (make sure you’ve included information on any embargos)
Is the contact information correct and in the right-hand corner of the page? This includes the name of the company, phone number, and email address.
Does the formatting match the outline requested by the publication?
Is the boilerplate at the bottom of the template?
Is the headline eye-catching and meaningful?
Are all of the relevant details included throughout the press release in order?
Are names and information spelled correctly?
Is the press release free from any grammatical issues and complex jargon?

Make sure you include information on how to reach out to you if the publication notices anything wrong with your site’s performance.

Where To Send Your Press Releases

Once you’ve worked through your press release (and double-checked it for quality and accuracy), you can think about where you’re going to send it. For example, you may send multiple versions of your press release to different companies and publications. Ideally, you’ll create an entire press kit, which might include pictures of your team, product, or service, as well as contact details and extra brand information.

Some companies prefer to approach press relationships by pitching their story to a few carefully selected editors and publications. This is often a good idea if you’re trying to reach a particular audience or you want to improve your reputation by connecting with a certain brand.

Alternatively, you can use PR wire services to send your information to multiple companies at once. There are various services online to help you get your press announcements to the right people. Options to look into include:

Industry publications for specific sectors (like technology or medicine)
Local newspapers and online news outlets
General news sites like Google News and Apple News
Blog sites that attract your target audience
Influencers and industry partners

Start small and gradually build a list of contacts to help you get your voice and business out there. Eventually, you’ll find it’s much easier to get publications to accept your press releases. You might even find that people start approaching you to find out if you have any upcoming news.

Go and Get Published!

Now you’re equipped with everything you need to know to create a fantastic press release and attract new eyes to your business. The only thing to do next is to get out there and start sending your press releases to the right people. Remember, once your press release is published, make sure you promote it through your social channels, email, and website.

Featured image via Pexels.

The post How to Write a Press Release: The Complete Guide for 2021 first appeared on Webdesigner Depot.

Mobile loading speeds became a Google ranking signal in July 2018.

7 juillet 2021/par Service comm.

17 Things You Can Do To Improve Your SEO Ranking In 2021

Actualités, Actualités, SEO

There’s no shortcut to success when it comes to Google search results. That is unless you count pay-per-click advertising.

While pay-to-play will shoot your site to the top of the SERP immediately, it’s not a sustainable strategy for maintaining your position there. So, you’re going to have to get serious about SEO.

This guide will show you what to do to improve your SEO ranking and start seeing results this year:

Use Google Analytics to track metrics
Get an SSL certificate
Improve mobile page speed
Design a mobile-first UI
Make your site accessible
Optimize your images
Create great content
Structure your content for scannability and readability
Create click-worthy title tags and meta descriptions
Choose one focus keyword per page
Improve your internal link strategy
Use only trustworthy external links
Get your site listed as a featured snippet
Get high-quality backlinks
Create a Google My Business page
Refresh Your Content
Regularly monitor Google Search Console

How to Increase Your Website’s SEO Ranking

If you can improve your SEO ranking — and get your pages closer to, if not on the highly coveted top SERP — you will:

Boost your site’s overall visibility as its authority in search grows;
Bring high-quality traffic to your pages;
Drive-up your conversion rate.

That said, search engine optimization is most effective when it’s an ongoing strategy as opposed to something you set up and forget about. So, some of the suggestions below will only need to be implemented once, while others you’ll have to return to every six months or so to make sure your site is on track.

Let’s get started.

1. Use Google Analytics to Track Metrics

If you haven’t yet begun tracking your website’s activity with Google Analytics, it’s the very first thing you need to do.

While Google Analytics alone can’t tell you how well or poorly your website ranks, there’s valuable data in there about what happens to the traffic that arrives from Google. Or any search engine your visitors use.

You can find this information under Acquisition > Source/Medium:

What you want to see here is that (1) you’re getting lots of visitors from organic search results (as opposed to paid) and (2) that they’re highly engaged. So, that means:

Longer times on site;
Multiple pages visited;
Lower bounce rates.

And if you configure Google Analytics to track different conversions on your site, you can see how well those organic visits convert.

Obviously, there’s a lot more you can track here. But you must understand if your SEO efforts are working in the first place, and that’s where you’ll get your confirmation.

2. Get an SSL Certificate

HTTPS has long been one of Google’s SEO ranking factors. Yet, of the two billion-plus websites that are online today, BuiltWith data shows that only 155 million have an SSL certificate installed:

Security and privacy are major concerns for consumers. So if you want to increase their confidence in your website, installing an SSL certificate is an easy thing to do. And it’ll put you in Google’s good graces, too.

If you don’t have one already, get one for free from Zero SSL.

3. Improve Mobile Page Speeds

It was something we saw coming ever since smartphones overtook the desktop as the primary device people used to access the Internet. Once it became a ranking factor, though, mobile page speed was something we could no longer treat as a “nice to have.” It became a must.

And with Google’s most recent Core Web Vitals algorithm update, there’s no ignoring how big of a role your site’s mobile loading speeds (i.e., performance) play in ranking it.

To ensure that your site meets Google’s expectations for speed, bookmark the Core Web Vitals tool. It’ll tell you how your site performs across all four of the major ranking categories.

You’ll find your speed-related issues at the bottom of the page, along with resources to help you resolve them.

Most of those tips will have to do with optimizing your code. However, there are other things you can do to make your site load quickly:

Use well-coded themes and plugins;
Remove unused themes, plugins, media, pages, comments, backups, and so on from your database and server;
Install a caching plugin that’ll minify, compress, and otherwise make your site lightweight and fast.

It’s also not a bad idea to review your web hosting plan. You might not have the right amount of server power or resources to keep up with your existing activity.

4. Design a Mobile-First UI

On a related note, a mobile-first design can also improve your site’s loading speeds. Rebekah Carter wrote a really helpful guide on how to do this last year.

In addition to speeding things up — since you won’t be trying to jam a bunch of desktop-first design and content into a smartphone screen — it’s going to help your site rank better.

Just be careful when you do this. A mobile-first design doesn’t mean creating a scaled-back version of the larger site for smartphone users.

In fact, Google explicitly tells us not to do that and why:

“If it’s your intention that the mobile page should have less content than the desktop page, you can expect some traffic loss when your site is enabled mobile-first indexing, since Google can’t get as much information from your page as before.”

And if your response is that the content on desktop-only doesn’t matter, then it really shouldn’t be there. Don’t waste your visitors’ time with useless or repetitive content, as it’ll only give them more reason to abandon your site.

5. Make Your Site Accessible

Accessibility has come to the forefront of the SEO discussion thanks to Core Web Vitals.

Now, running your site through the tool will tell you if there are any inaccessibility issues that Google will ping you for. But that doesn’t make your site completely accessible.

Considering the rise in website accessibility-related lawsuits, you’ll want to take this seriously.

Because a bad experience due to inaccessibility won’t just cost you visitors and a lower search ranking, it’ll cost you a lot of money, too.

Here are some things you can do to ensure that your site and all its content is accessible.

6. Optimize Your Images

Technically, image optimization falls under the page speed tip. However, that’s not the only way you should be optimizing your images, which is why I wanted to address this separately.

According to HTTP Archive, the average weight of a mobile web page these days is 1917.5 KB. Images take up a sizable chunk of that weight:

Because of this, bloated image sizes are often to blame for slow pages.

You can do several things to optimize your images for speed, like using lightweight formats, resizing them, and compressing them. You’ll find 6 other image optimization tips here.

While those tips will help you speed up your site and, consequently, improve your SEO ranking, there’s something else you need to do:

Add alt text to your most important images.

One reason to do this is to improve accessibility. Another is so your web page can rank in both the regular Google search results and image results as this search for “WordPress by the numbers” does:

If you can write alt text that perfectly describes your graphic and matches the image searchers’ intent, you can create another ranking opportunity for your page.

7. Create Great Content

There are many technical ranking factors you have to pay attention to if you want to create a good experience for your visitors and rank well as a result. However, none of that will matter if your content sucks.

So, how do you make great content? It really depends.

Think about the difference between a page describing your web design services and a product page for a blender.

Your web design services page would need to:

Explain why hiring a web designer is a must;
What your design services entail;
What they can expect in terms of results;
Include some proof in the form of testimonials or portfolio samples;
Have information on next steps or how to get in touch.

That would be a comprehensive and useful page. If business owners searched for “hire a web designer near me” or “should I hire a web designer?”, that page would sufficiently answer their query.

A product page, however, would need to:

Provide a brief summary of the blender;
Show photos of the blender, different angles of it, as well as different variations of the product;
Display the price;
Allow customers to Add to Cart or Save for later;
Include technical specs of the blender;
Recommend related products;
Display sortable customer testimonials and ratings.

The last thing a shopper would want is to be directed to a product page that reads like one of your services pages.

So, great content not only needs to be well-written and error-free, but it needs to match the searcher’s intent and expectations. If you can do that, your visitors will stay as long as they need to read through everything, which will help strengthen the page’s ranking.

8. Structure Your Content for Scannability and Readability

Including necessary details and in the right format is an important part of making a page’s content valuable to the visitor. The structure is going to help, too.

For starters, you want to make sure every page is human-readable. So, that involves:

Shorter sentences and paragraphs;
Linkable table of contents for longer pages;
Header tags every few hundred words;
Descriptive and supportive imagery throughout;
Text callouts like blockquotes and bolded phrases.

By making a page less intimidating to read and easier to scan for a quick summary of what it is, you’ll find that more visitors are willing to read it and follow your calls to action.

You can use a tool like Hemingway to improve your page’s readability. Quickly pop the text of each page into the editor and follow the recommended suggestions:

You’re also going to have to think about how well Google’s indexing bots can read your page. They’re smart enough to pick up on cues but not smart enough to sit down and read your article on the benefits of Vitamin D or how to install a new showerhead.

So, you’ll need to use HTML meta tags as well as hierarchical header tags to tell the bots what the page is about.

If you’re building a WordPress site, you can use the Yoast SEO plugin to analyze how scannable and readable each page of your site is (among other things):

9. Create Click-Worthy Title Tags and Meta Descriptions

To get eyeballs on your really great content, the brief preview users see of it in search results needs to be able to lure them in. Get more clicks to your site from search, and Google will take notice.

But they can’t just be superficial clicks. If Google notices that your page is getting a ton of traffic that almost immediately drops off once they see the content on the page, your page will not fare well in search results.

So, your goal is to stay away from clickbait-y title tags and meta descriptions and make them click-worthy.

The first thing to focus on is the length. Google only gives you a certain amount of space to make your pitch.

There are many tools you can use for this, but I prefer Mangools’s SERP Simulator:

It allows you to play around with your URL, title tag, and meta description and to watch in real-time as it fits the allotted space. You can also compare it to the pages that currently rank for the keyword you’re going after, which can be a really useful reference point. After all, if those sites have made it to the first SERP, then they’re doing something right.

Another thing to think about when writing click-worthy titles is how engaging they are.

The tool I recommend for this is CoSchedule’s Headline Studio:

I don’t find this useful so much for basic web pages. You don’t need to get creative with something like your About or Contact pages. But for content marketing? If you want to beat out competing articles for attention in Google, this tool will be very useful.

10. Choose One Focus Keyword Per Page

It’s not as though you can add a keyword tag to your page, and Google will automatically rank your site for it. That’s not what keyword optimization is.

Instead, what you do is select one unique keyword per page and write the content around it. So, it’s really more about creating a clear focus for yourself and then comprehensively unpacking the subject matter on the page.

Keep in mind, though, that if you want to improve your chances of ranking for the keyword, it needs to be relevant to your brand, useful for your audience, and your site needs to actually be able to compete for it.

You can use the Google Keyword Planner to find keywords that fit those criteria:

Ultimately, you should choose a keyword that:

Has a decent amount of monthly searches — over 1,000 is what I aim for;
Have “Low” to “Medium” amount of competition, but the lower, the better;
Matches the user intent. So take that keyword, put it into Google and see what you find. Then, look at the sites on that first page of search results. Do they match what your own page will address? If so, then you’ve found a keyword that aligns with your users’ search intent.

Now, if you’re writing great content that addresses your visitors’ questions and concerns, then optimizing for your focus keywords will happen naturally. The same goes for related keywords you might want to target. As you write the content for each page, the keywords will organically appear.

But remember how I said Google’s indexing bots need certain HTML and header tags to “read” the content on the page? This means you’ll need to include the focus keyword in some of those areas, so there is no question about what the page is about.

Here’s where your focus keyword should show up:

Title tag (H1);
Meta description;
Slug (hyperlink);
Within the intro;
The first H2 header tag;
Alt text for the most important image on the page;
Within the conclusion.

It should also appear throughout the page, along with variations of the keyword that people might search for.

You can use the Yoast SEO plugin to analyze this as well.

11. Improve Your Internal Link Strategy

Okay, so here’s where we start to get into SEO strategies that Google might not directly care about, but that can still drastically improve how well your site ranks.

Internal links, in particular, are valuable because they create an interconnected structure for your site. Here’s a basic example of why that’s important:

Let’s say these are the pages on your website. Each of them can be accessed from the home page and main navigation. This structure tells us that each page is related to the overall message and mission of the company, but they are not related to one another. And that doesn’t make sense, right?

When you’re educating visitors on your Web Design services, it’s naturally going to come up that you also happen to specialize in WordPress and eCommerce design. So, those internal links should appear on your Web Design page. And vice versa.

In addition, your Portfolio and Contact Us pages are likely going to be the most common CTAs on the site. Your prospective clients shouldn’t be forced to backtrack to the homepage or scroll up to the navigation to take action. By including these internal links or buttons within the content of the services pages, you’re giving them a quick and direct line to the next steps.

The more intuitive you make the user journey, the easier it will be for them to convert.

This is one reason why websites with a strong internal linking structure perform well in search results. Another reason is that internal links help Google’s bots find all of the content on your site and better understand how they relate to one another.

12. Use Only Trustworthy External Links

Link juice is one of the reasons why business owners are obsessed with getting backlinks. We’ll get to that shortly.

But it’s also something that comes into play when choosing external links to include on your site.

Link juice is the idea that one site can pass its authority to another through a dofollow link. So, by linking out to authoritative and trustworthy sources, your site may raise its own clout with the search engines because of that connection.

However, it works both ways. If you create external links to websites with misinformation that pose a security threat to visitors or are otherwise untrustworthy, that bad reputation can do your website harm.

So, make sure that every external link you use is necessary and reliable. If not, get rid of it.

13. Get Your Site Listed As a Featured Snippet

I said earlier in this post that pay-per-click advertising is the only way to shortcut the SEO process and get on the first page of Google. That’s not entirely true.

We’ve already seen how optimizing your images for Google Images search can shoot your site to the top of results. Another way to get ahead is by optimizing your page using structured data to land a spot as a featured snippet.

Like this page from Bankrate that answers the question “how do you get a loan”:

Remember that structured data alone won’t instantly move your web page into the featured snippet space. The content needs to be the best it can be, and the structured data needs to be well written.

Schema.org was created to help you pick the right category and write the structured data for it:

Use this to write up the relevant microdata for the pages to make the most sense to do so. For instance, an About page probably wouldn’t benefit from having structured data attached to it. However, a lengthy blog post that explains a step-by-step process would.

There are WordPress plugins (Yoast is one of them) that will help you insert this code into your pages if you prefer.

14. Get High-Quality Backlinks

Backlinks pointing to your website are a huge indicator to Google that your site is share-worthy and authoritative.

However, like everything else in SEO, you can’t cheat your way into a bunch of backlinks. They need to come from authoritative sources, and they need to be relevant. That’s why paying or bartering for backlinks isn’t usually effective. If your web page’s backlink doesn’t organically fit within the content on their site, visitors aren’t going to click on it.

There are lots of ways to go about building up a repository of backlinks that do generate authority for you and improve your SEO ranking in the process:

Get active on social media and become an authority there: The rule is generally that 80% of your posts need to be non-promotional. By sharing content from all kinds of sources that are relevant to your audience, you’re going to get more meaningful engagement. And this’ll eventually put the spotlight on your own content and get people to share it on social media, too.

This is something that Google will look at when ranking your site: What sort of social signals are coming from your brand?

Get featured as an expert: You don’t need to become an influencer for people to view you as an expert in your field. It’s all about your reputation.

By leveraging your reputation to get speaking gigs, you’ll grow your authority even more. Just make sure they’re relevant to what you do. So, look for podcasts, webinars, and conferences in your field that are looking for experts.

Become a guest blogger: If public speaking isn’t your forte, that’s okay. Turn your attention instead to lining up guest blogging gigs.

By writing high-quality content for authoritative websites (whether you get paid or not), you’ll bring more attention to your own brand. And Google will pass that authority onto your site.

15. Create a Google My Business Page

Any business can create a Google My Business page. There are a number of SEO-related benefits to doing this.

The first is that local businesses can literally put themselves on the map with Google My Business. Here’s what a Google search for “restaurants near me” looks like:

Even if your site doesn’t appear on the first SERP, the map that sits at the top of search results can give you a front seat anyway.

Another reason to create a My Business page is that you get to control your knowledge graph sidebar, like Ford’s Garage does here:

By including high-quality graphics, pertinent details about the business, and collecting positive customer reviews, this knowledge graph could do your brand’s reputation a lot of good in the eyes of Google and your prospects.

16. Refresh Your Content

This is useful for all of the content on your site, even your most high-performing pages.

If your site is starting to gain traction, take a close look at your Google Analytics data. You may find a few pages that no one seems to be paying attention to or, worse, that they always seem to bounce from.

In Google Analytics, go to Behavior > Site Content to figure out which pages are underperforming.

Then, ask yourself:

Is this page even a necessary part of the user journey? If not, you can probably scrap it and have one less distraction on your site.
If this page is necessary, what do you need to do to make it more valuable and relevant to your audience?

With the most popular pages on your site, it’s not unreasonable to expect that at least part of what you originally wrote will go stale or become irrelevant within a year or two. So, it’s a good idea to refresh these as well.

To do that, it’s simple. Do a search in Google for your focus keyword. Read through the top five results and see what sort of information your post is missing. Then update it accordingly.

Anything outdated or irrelevant should also be stripped out.

17. Regularly Monitor Google Search Console

Last but not least, you should keep your eyes on Google Search Console.

There’s a lot of valuable information in here that will tell you why your site might not be ranking as well as it could. You’ll find issues related to:

Indexing
Mobile usability
Security
Core Web Vitals

You’ll also find data on how well your site is ranking in general. You’ll find this under the Performance tab:

Use this to identify:

Which keywords you’re ranking for and are driving traffic to your site;
Which keywords you’re getting the most impressions from but not getting clicks from;
Which keywords you’re getting the most clicks from but not a lot of impressions;
Which keywords you rank low for and could stand to improve upon.

You can learn a lot about how strong your SEO strategy is. Just use the Clicks, Impressions, and Position tabs to sort your data so you can better understand what’s going on.

Then, prioritize fixing the pages that can and should be bringing your site highly qualified traffic but aren’t.

Wrap-Up

If you’re wondering how long it’ll take before you see an improvement in your SEO ranking, it depends. If your domain’s current authority is low, it can realistically take about six months to see major changes. That said, if you implement all of the suggestions above, you can certainly expedite that.

Just remember that there are no real shortcuts in SEO. You need to have an authoritative and trustworthy website and brand before anything else. So, take the time to build your credibility online so that these SEO tactics can really work.

The post 17 Things You Can Do To Improve Your SEO Ranking In 2021 first appeared on Webdesigner Depot.

1 juillet 2021/par Service comm.

7 Best Browsers for Developers in 2021

With the widespread acceptance of web standards, and the resulting deprecation of browser prefixes, there has been a noticeable change in the browser market. Where once browser manufacturers would try to lure users in with promises of feature support, now the focus is on privacy, speed, and developer tools.

When it comes to web development, you should really be testing on every browser and device you can lay your hands on; you’re probably already doing so using an app like LambdaTest, or BrowserStack.

When quality assurance testing, you probably work by market share: starting with Safari on mobile, Chrome on desktop, and working your way down to Opera and (if you’re a glutton for punishment) Yandax; naturally, when testing, it’s the largest number of users that concerns us the most.

But before you reach the QA stage, there are a number of browsers designed to assist development. Browsers that offer tools, especially for front-end developers, that assist with code and speed up development. Here are the best browsers for web development in 2021:

1. LT Browser

LT Browser is an app for web developers from LambdaTest. Like many of the apps in this class, it offers side-by-side comparisons of a site in different viewports. Additionally, LT Browser has a number of features that make it stand out.

As well as previewing web pages, LT Browser offers developer tools to rival Chrome, which is handy if you want to see how changes across different devices affect your Lighthouse scores. LT Browser also supports hot-reloading, which means when you make a change to your code, you don’t have to hit ‘refresh,’ the viewports simply reload — it’s surprising how much of a time-saver that simple addition is.

LT Browser requires a LambdaTest account, there is a free plan, and paid plans start at $15/month.

2. Firefox Developer

The best conventional browser for web development in 2021 is the developer edition of Mozilla’s Firefox.

The standard edition of Firefox is an excellent browser, packed with features, and privacy-focused. The developer edition adds to this with a suite of tools aimed at developers. The CSS and JavaScript debugging tools are superb, and the Grid tools are unparalleled for coding layouts with CSS Grid.

Firefox Developer is free to download.

3. Polypane

Polypane is one of the new generation of web browsers that are firmly intended as development aids rather than browsers. Polypane allows you to compare different viewports and platforms by placing them side by side. Interactions like scrolling are synced.

Polypane takes a step further than many browser apps in this class by showing social media previews. It even has a suite of accessibility tools, including some handy color blindness simulators.

Polypane has a 14-day free trial, and plans start at $8/month.

4. Blisk

Blisk is another browser for developers that allows you to line up a collection of viewports in a single app. URL and scrolling are synced, making testing interactions and animations effortless.

Blisk is awesome fun to play with and delivers a great preview of a responsive design. But be warned, synced viewports can be addictive, and it’s easy to line up browsers and become hypnotized by the synchronized movement; you’ll need a very large screen to get the most out of Blisk.

Blisk plans start at $9.99/month.

5. Sizzy

Sizzy is another app that allows you to view multiple viewports at once. It also has synchronized interactions, and like many competing apps, Sizzy allows you to screenshot different views.

Sizzy also includes a very clever synchronized inspect tool, so you can focus on individual elements across different viewports. It’s an excellent option for debugging, particularly if you’re digging into someone else’s code.

Sizzy has a 14-day free trial, and paid plans start at $7.15/month.

6. Brave

Brave is a privacy-focused browser that runs up to three times faster than Chrome. If you’re someone who balks at rendering speeds on most sites, Brave could be for you.

Brave’s main benefit for developers is that it supports Chrome extensions while maintaining privacy — it can even access the Web using Tor if simple privacy mode isn’t enough for you. There are hundreds of useful Chrome extensions, and if you avoid Chrome due to privacy concerns, then Brave solves your problem.

Brave is also pioneering a new system for monetizing site revenue, allowing viewers to tip sites, and soon, to control how advertising revenue is distributed.

Brave is free to download.

7. Chrome

Boring it may be, but Chrome is still the world’s most popular browser from the US to mainland China. Where once sites were “best viewed in IE,” Chrome is now the Web’s default.

No matter the site you’re designing, it has to work well in Chrome, and no simulator is as good as the real thing.

In addition to being the benchmark for page rendering, Chrome developer tools are the simplest way to access your Lighthouse scores, which helps you track down issues that may be holding you back in Google’s search results.

Chrome is free to download.

The post 7 Best Browsers for Developers in 2021 first appeared on Webdesigner Depot.