Articles

As a web designer, you’re responsible for a lot of things. Your client is relying on you to ensure that their website is user-friendly, accessible, eye-catching, and even good enough on the back-end to capture the attention of the search engines. 

However, what many business leaders and clients don’t realize is that they also have a part to play in ensuring that they get the right results from their site; there’s more to the client and contractor relationship than an exchange of funds. 

Today, we’re going to examine some of the most common mistakes that clients make when they begin working with a website designer for the first time. After all, when a client makes a mistake, it’s up to you to show them how to get back on track. 

Client Mistake 1: Providing Minimal Insight

Creativity, for the most part, is the responsibility of the designer in any web-building project. You know best what you can do for a client. 

When you’re discussing an upcoming project with a business owner, you can walk them through concepts like dark mode design or strategies for digital accessibility. However, you’re still reliant on your client to let you know if there’s anything specific they need. 

An insufficient brief in a web design project usually means that you waste time on a project because you have to go back and forth multiple times, making updates and edits. Getting a brief ironed out properly from day one can reduce misunderstandings and mistakes. 

To get your client started, ask them to share some details like:

  • Who’s the target audience? Do they have a user persona they can share?
  • What specific features does the site need? Landing pages, forms, widgets, etc.?
  • Competitor sites they like: What do they appreciate about those designs?
  • Brand colors and assets: What kind of hues and shades should you use?
  • Technical feature requirements: Does the site need to have its own app, integrate with APIs, or have a checkout solution, for instance?

Client Mistake 2: Underestimating The Workload

Perhaps one of the most common mistakes that clients make when seeking help from a designer is that they have no idea how much work it will take to create the kind of site they want. If they haven’t provided a great brief in the first place, they might not have had a chance to see all the work they’re asking for written down. Walking your client through the brief process can help here. 

On the other hand, if your client has already provided a brief, along with an unrealistic deadline for completion, you might need to have a discussion with them about what you need to do. Walking your client through some of the processes involved in creating their website could give them an insight into how long it will realistically take to bring their ideas to life. 

Additionally, ensuring that your customers fully understand the amount of work you’re taking on could also mean that they can better grasp why you’re charging a certain price for your services. That brings us neatly to the next mistake…

Client Mistake 3: Not Having The Right Budget

Pricing your design services can be a complicated process for web designers. You need to make sure that you’re charging enough to cover the cost of things like essential software and hardware for your company. At the same time, with so many other designers out there, you also need to ensure that your costs are competitive. 

After you’ve gone through the hard work of figuring out what your pricing structure should be, you also need to be capable of justifying that expense to your client. It’s common for many customers to go into their work with a web designer expecting that they’ll be able to get an entire website, blog, and app for less than a couple of hundred dollars. 

Make sure that your client is aware of your pricing immediately to avoid any confusion. If possible, have a pricing page on your website or portfolio which highlights the cost of different packages and precisely what your clients are going to get. 

If your customers can see the value in your services and even equate to an hourly workload or skillset, they might be better equipped to set the proper budget. 

Client Mistake 4: Making Too Many Technology Decisions

You’ll find that you work with many different types of client during your time as a web designer. Sometimes, you’ll have people who come to you not really knowing what they want or need. This means that you may need to spend some time speaking to them about their expectations and discussing what’s possible. 

On the other hand, there’s always a chance that you could work with a client who thinks that they should be making all of the decisions themselves. While it’s true that your client should have some control over things like the style of their website and what features it has, it’s up to you to make technical decisions like what kind of tools you’re going to use. 

If your client tries to dictate everything you do and how you’re going to do it, this could make it difficult for you to deliver your best work. Explain your processes to your customer in advance and find out why they want you to use specific technology. 

For instance, if your client wants to use a specific kind of website builder because they’ve heard it’s “the best,” you can explain what you like most about the product you’re already using. 

Client Mistake 5: Being Too Attached To An Idea

This is a problem that happens in a lot of creative industries. A client goes out and finds something that they like on another website. It might be an attractive landing page or a specific checkout process. They’re so excited by what they see there that they refuse to compromise on that idea when working with their designer – even if the concept isn’t suitable. 

For instance, your client might come to you wanting a website that’s full of dynamic animations and videos. However, if they only have a limited amount of bandwidth from their hosting provider, this could mean that they end up with a slow site that aggravates their customers. 

The best thing you can do when this happens is to present the issue to your client in a way that they can understand. For instance, if you’re worried something will slow down their website, talk to them about how speed is essential to good customer experience. You could even share some page speed stats like: if a page takes more than 3 seconds to load, over half of all visitors will abandon it. 

Seeing the stats for themselves could mean that your clients are more likely to change their minds. 

Client Mistake 6: Working With The Wrong Designer

Finally, one of the biggest mistakes any client can make is working with the wrong website designer. There are a lot of professionals out there, each with their unique skills to offer in things like UX design, ecommerce page creation, and so much more. However, it’s not always easy to know what you need as a business owner getting online for the first time. 

The good news for web design clients is that there’s a lot of information out there that you can use to get informed fast. The bad news for designers is that this means you’re going to need to work at keeping your skills on the cutting edge if you want to attract the widest selection of customers. 

To ensure that you’re more likely to be the right designer for your customers, stay up to date with the latest web design standards, and check out what’s trending in your industry. Webinars, articles, and even TED talks can be an excellent way to brush up your knowledge and make your portfolio much more appealing. 

Strengthen Your Client/Designer Relationships 

Succeeding as a web designer isn’t just about building a robust portfolio full of excellent websites where you can showcase your skills. While it’s true that you need to stay on the cutting edge with your design talents, you also need to make sure that you can create positive relationships with every client that comes to you. 

Like designers, clients can make mistakes too, but not knowing what they want, trying to take too much control, or simply failing to understand the scope of a product. Rather than letting those mistakes hold you back, prove your mettle as a designer by helping your clients navigate these issues. The result will be more streamlined project experiences, happier customers, and better reviews for your company. 

 

Featured image via Unsplash.

Source

The post Protect Your Design Clients From These 6 Easy Mistakes first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Tilda website builder combines everything we liked so much about constructors when we were kids – you can experiment, test out and build myriads of new creative ideas out of ready-to-use blocks. Tilda is that type of constructor that allows you to own your creative process and create pretty much any website: landing page, business website, online store, online course with members area, blog, portfolio, or event promo page.

Founded seven years ago, Tilda is a website builder that completely revamped the way we create websites. Tilda has been the first website builder to introduce block mechanics that allows users to create websites out of pre-designed pieces. This breakthrough technology allowed all users – not only designers – to create professional-looking websites. Just like in kid constructors, you can drag-and-drop and mix-and-match blocks on Tilda to let your creativity flow and build a dazzling website, at extraordinary speed. 

When you ask designers why they love Tilda, they usually say it’s because the platform provides the ultimate balance between choosing from templates and being able to fully customize and create from scratch to bring any creative idea to life. Here’s what else they say:

Tilda has been a game-changer for us. It allows our team to quickly spin up new web pages, make edits, and ship new programs. We left WordPress for Tilda and after being with Tilda for 2 years, I don’t ever want to go back.

~ Andy Page, Executive Director, Forge.

I built my first website in 2001. Since then I’ve used countless platforms and website builders for customer websites and my own business. Tilda is the perfect combination of ease of use with powerful features at an unbeatable value.

~ Robby Fowler, Branding and Marketing Strategist, robbyf.com & The Brand ED Podcast.

Let’s dive deeper into core functionalities you can leverage on Tilda. 

#1 Cut Corners With 550+ Pre-Designed Blocks And 210+ Ready-Made Templates

The beauty of Tilda is that it provides 550+ blocks in the ever-growing Block Library designed by professional designers. Thus, you can quickly build a website out of pre-designed blocks that encompass virtually all elements you might need for your website: menu, about us page, features, contact, pricing, etc. 

Customizing each block is a breeze with Tilda: You can drag-and-drop images, edit text right in the layout, alter block height, background color, padding, select the style of buttons, use custom fonts, and assign ready-made animation effects to specific parts of it. Also, Tilda provides a built-in free image library with 600K+ images, so you can find images that are just right for you without leaving Tilda, add them to your website with just one click, and use them for free.

Finally, all blocks fit together so well that it’s almost impossible to create a bad design on Tilda – even if you are a stranger to website building.

For a quick take-off, you can use 210+ ready-made templates for different kinds of websites and projects: online stores, landing pages, webinar promo pages, multimedia articles, blogs, and more. Each template is a sample of modern web design and consists of blocks. It means that templates don’t limit your creativity: you can modify them to your liking by playing with settings, adding extra or removing existing blocks, and embedding images and text. 

Each of the templates and blocks covers over 90% of use cases you’ll ever require and is mobile-ready, meaning that your website will look great on desktop computers, tablets, and smartphones by default.

#2 Jazz Up Your Site With Zero Block: Professional Editor For Web Designers 

To better meet the demands of a creative brief and unleash your creativity, you can use Tilda’s secret weapon called Zero Block. It is a tool for creating uniquely designed blocks on Tilda.

You can control each element of the block, including text, image, button, or background, and decide on their position, size, and screen resolution on which they’ll appear. For example, you can work with layers to create depth with overlay and opacity techniques or set a transparency level on any element and shadow effects below them. Additionally, you can also insert HTML code to add more complex elements, such as calendars, paywall, comments, social media posts, and so much more.  

Finally, Zero Block allows you to fool around with basic and more advanced step-by-step animation for a more individual look. Here’re some animation examples that you can make on Tilda:

Animation on scroll (position of elements is changing on scroll).

Trigger animation (animation is triggered when pointing at or clicking on an object).

Infinite scrolling text.

#3 Import Designs From Figma To Tilda In Minutes

Creators love using Figma for prototyping, but when you have to transfer every element and rebuild your website design from scratch – that’s what’s killing the party. With Tilda, you can easily turn your static designs into an interactive website in no time. 

All it takes is to prepare your Figma design for import with a few easy steps, paste the Figma API token and your layout URL to Tilda, click import and let the magic happen. Once your design is imported, you can bring your project online just by clicking publish.

#4. Make Search Engines Love Your Website With Built-In SEO Optimization

Thanks to the consecutive positioning of blocks on the page, websites designed on Tilda are automatically indexed well by search engines. There is also a set of SEO parameters you can fine-tune right inside the platform to ensure that your web pages rank high even if you don’t have an SEO specialist in-house. These parameters include the title tag, description and keywords meta tags, reader-friendly URLs, H1, H2, and H3 header tags, alt text for images, and easily customizable social media snippets. 

As an additional value, Tilda provides an SEO Assistant that will show you what errors are affecting the indexing of your website and will help test the website for compliance with the search engines’ main recommendations.

#5. Turn Visitors Into Clients

Tilda gives you the power to set up data capture forms and integrate them with 20+ data capture services, such as Google Sheets, Trello, Notion, Salesforce, Monday.com, etc., to ensure seamless lead generation.

For more fun, Tilda developed its CRM to manage your leads better and keep your business organized right inside of a website builder. This is a very easy-to-use tool that automatically adds leads from forms and allows you to manually add leads you captured outside of the website. There is a kanban board that gives you an overall view of how leads are moving through your sales funnel and allows you to move leads between stages easily.

#6. Build A Powerful Online Store In One Day

Tilda provides a set of convenient features to create a remarkable online shopping experience. The platform gives you the power to sell online using ready-made templates or build an online store completely from scratch, add a shopping cart and connect a payment system of choice — Stripe, PayPal, 2Checkout, etc. — to accept online payments in any currency.

If you are looking to run a large ecommerce business, you should also consider Tilda. Thanks to the built-in Product Catalog, you can add up to 5000 items, import and export products in CSV files, easily manage stock, orders, and keep track of store stats.

And thanks to adaptive design, your store will look good across all devices, including tablets and smartphones. 

#7. Bring Your Project Online For Free

Tilda offers three subscription plans: Free, Personal ($10/month with annual subscription), and Business ($20/month with annual subscription). When you sign up for Tilda, you get a lifetime free account. It allows you to publish a website with a free subdomain and gives you access to a selection of blocks and a limited number of features that offer enough to create an impressive website. 

Personal and Business tariffs allow more advanced options, such as connecting custom domains, adding HTML code, receiving payments, and embedding data collection forms. The business plan also allows users to export their website and create five websites (while personal and free plans allow one website per account). 

To discover all features and templates on Tilda, activate a two-week free trial – no credit card required.

Source

The post Tilda – The Website Builder That Disrupted The Way We Create Websites first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. 

Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that you need to discover the right UX strategies for everything from your website homepages to your email marketing messages and even your listings on Google. 

Today, we’re going to explore ways you can apply UX principles to your client’s image on search engines. 

Why Your Search Engine Listing Matters

Let’s start with the basics…

89% of customers start their purchasing process with a search engine. 

That means that whether you’re creating a portfolio to sell your services or building a website for a client, the first connection a customer has with your design isn’t on the homepage.

Developers and designers know that first impressions count when it comes to succeeding online. However, they assume that those first impressions happen on a social media channel, a landing page, or a home page. 

The truth is that most of the time, you’re driving a specific experience for an end-user before you even realize it. Before you can wow an audience with a beautiful site design or a fantastic CTA offer, you need to convince them to click on your Google link.

Just as UX on a website is all about giving your audience what they need in an informed and strategic manner, UX in search engine results works the same way. 

How to Make Your Search Listing Stand Out with UX

So, how do you begin to apply the principles of UX to your Google Search results?

It’s much easier than you’d think. 

Step 1: Show Immediate Value 

Delivering an excellent experience on a website often means providing end-users with the information they need as quickly as possible. Imagine designing a landing page; you wouldn’t want your audience to scroll forever to find what they need. Instead, you’d make sure that the value of the page was immediately apparent. 

When creating an image for your search engine listing, you’ll need to take the same approach. This often means thinking carefully about two things:

  • Your headline
  • Your meta description

Around 8 out of 10 users say that they’ll click a title if it’s compelling. That means that before you do anything else to improve your SEO strategy, you need to make sure that the title of your web page is going to grab the audience’s attention. 

The best titles deliver instant value.

Immediately, these titles tell the audience exactly what they’re going to get when they click onto the page. The promise drives action, while clarity highlights the informed nature of the brand. 

The great thing about using an excellent title for a page is that it doesn’t matter where you’re ranked on the search results. Whether you’re number 2 or number 5, your customers will click if they find something they want. 

It’s just like using a CTA on a landing page. Make sure your titles are:

  • Informative: Show your audience value immediately
  • Optimized for mobile: Remember, your audience might not see your full title on some screens. That means that you need to make the initial words count.
  • Easy to read: Keep it short, simple, and straightforward. Speak the end-user’s language

Step 2: Build Trust with Your URLs

Trust factors are another essential part of good UX

When designing a website for a new brand, you know that it’s your job to make visitors feel at ease. Even in today’s digital world, many customers won’t feel comfortable giving their money or details to a new company. 

Within the website that you design, you can implement things like trust symbols, reviews, and testimonials to enhance brand credibility. In the search engines, it all starts with your URL. 

Search-friendly URLs that highlight the nature of the page will put your audience’s mind at ease. When they click on a page about “What is SEO” in the SERPs, they want to see an URL that matches, not a bunch of numbers and symbols

Use search-friendly permalink structures to make your listing seem more authoritative. This will increase the chances of your customer clicking through to a page and make them more likely to share the link with friends. 

Once you decide on a link structure, make sure that it stays consistent throughout the entire site. If a link doesn’t appear to match the rest of the URLs that your audience sees for your website, they may think they’re on the wrong page. That increases your bounce rate. 

Step 3: Be Informative with Your Meta Description

To deliver excellent UX on a website, you ensure that your visitor can find all the answers to their most pressing questions as quickly as possible. This includes providing the right information on each page and using the correct navigational structure to support a visitor’s journey. 

In the SERPs, you can deliver that same informative experience with a meta description. Although meta descriptions often get ignored, they can provide a lot of value and help you or your client make the right first impression. 

To master your meta descriptions:

  • Use the full 160 characters: Make the most of your meta description by providing as much useful information as you can within that small space. 
  • Include a CTA: Just as CTAs help guide customers through the pages on a website, they can assist with pulling in clicks on the SERPs. A call to action like “read about the” or “click here” makes sense when you’re boosting your search image. 
  • Focus on value: Concentrate on providing your customers with an insight into what’s in it for them if they click on your listing.

Don’t forget that adding keywords to your meta description is often helpful too. Keywords will boost your chances of a higher ranking, but they’ll also show your audience that they’re looking at the right result. 

Step 4: Draw the Eye with Rich Snippets

You’ve probably noticed that the search engine result pages have changed quite a bit in the last couple of years. As Google strives to make results more relevant and informative, we’ve seen the rise of things like rich snippets. Rich snippets are excellent for telling your audience where to look. 

On a website, you would use design elements, like contrasting colors and animation, to pull your audience’s attention to a specific space. In search engines, rich snippets can drive the same outcomes. The difference is that instead of telling a visitor what to do next on a page, you’re telling them to click on your site, not a competitor’s. 

When Google introduced rich snippets, it wanted to provide administrators with a way of showcasing their best content. Rich snippets are most commonly used today on product and contact pages because they can show off reviews. 

Install a rich snippet plugin into your site if you’re a WordPress user or your client is. When you enter the content that you need into the website, use the drop-down menu in your Rich snippet tool to configure the snippet.

Ideally, you’ll want to aim for the full, rich snippet if you want to stand out at the top of the search results. Most featured snippets have both text and an image. You need to access both of these by writing great content and combining it with a relevant image. 

Step 5: Provide Diversity (Take Up More of the Results)

As a website designer or developer, you’ll know that different people will often be drawn to different things. Some of your visitors might immediately see a set of bullet-points and use them to search for the answer to their question. Other visitors will want pictures or videos to guide them. So, how do you deliver that kind of diversity in the SERPS?

The easiest option is to aim to take up more of the search result pages. Google now delivers a bunch of different ways for customers to get the answers they crave. When you search for “How to use Google my Business” on Google, you’ll see links to blogs, as well as a list of YouTube Videos and the “People Also Ask” section. 

Making sure that you or a client has different content rankings for the same keywords can significantly improve any customer’s experience on the search engines. Often, the process of spreading your image out across the SERPs is as simple as creating some different kinds of content. 

To access the benefits of video, ask your client to create YouTube videos for some of their most commonly asked questions or most covered topics. If you’re helping with SEO marketing for your client, then make sure they have an FAQ page or a way of answering questions quickly and concisely on articles, so they’re more likely to appear in “People Also Ask”.

Step 6: Add Authority with Google My Business

Speaking of Google My Business, that’s another excellent tool for improving UX in the search results. It allows business owners to manage how information appears in the search results. 

With this service, you can manage a company’s position on Google maps, the Knowledge Graph, and any online reviews. Establishing a company’s location is one of the most important things you can do to help audiences find a business quickly. Remember, half of the customers that do a local search on a smartphone end up visiting the store within the same day. 

Start by setting up the Google Business listing for yourself or your client. All you need to do is hit the “Start Now” button and fill out every relevant field offered by Google. The more information you can add to Google My Business, the more your listing will stand out. Make sure you:

  • Choose a category for a business, like “Grocery store.”
  • Load up high-quality and high-resolution images
  • Ensure your information matches on every platform
  • Use a local number for contact
  • Encourage reviews to give your listing a five-star rating

Taking advantage of a Google My Business listing will ensure that your audience has all the information they need to make an informed decision about your company before they click through to the site. This means that you or your client gets more warm leads and fewer people stumbling onto your website that might not want to buy from you. 

Step 7: Use Structured Data Markup to Answer Questions

If you’re already using rich snippets in your Google listings, you should also have a plan for structured schema markup. Schema markup on Google tells the search engines what your data means. This means that you can add extra information to your listings that will more accurately guide your customers to the support they need. 

Providing additional schema markup information to your listings gives them an extra finishing touch to ensure that they stand out from the competition. For example, you might add something like a “product price” to a product page or information about the product’s availability.

Alternatively, you could provide the people who see a search result with other options. This could be an excellent option if you’re concerned that some of the people who might come across your listing might need slightly different information. 

For instance, you can ask Google to list other pages along with your search results that customers can “jump to” if they need additional insights.

Baking structured data into your design process when you’re working on a website does many positive things. First, it makes the search engine’s job easier so that you can ensure that you or your client ranks higher. Additionally, it means that your web listings will be more thorough and valuable.

Since UX is all about giving your audience the best possible experience with a brand, that starts with making sure they get the information they need in the search results. 

Constantly Improve and Experiment

Remember, as you begin to embed elements of UX into your search engine listings, it’s essential to be aware of relevant evolutions. Ultimately, the needs of any audience can change very rapidly. Paying attention to your customers and what kind of links they click on the most will provide you with lots of valuable data. You can use Google analytics to A/B test things like titles, pictures, featured snippets, and other things that may affect UX. 

At the same time, it’s worth noting that the Google search algorithms are constantly changing too. Running split tests on different pages will give you an insight into what your customers want. However, you’ll need to keep an eye on the latest documentation about Google Search if you want to avoid falling behind the competition. 

Like most aspects of exceptional UX, mastering your SERP position isn’t a “set it and forget it” strategy. Instead, you’ll need to work on constantly expanding your knowledge if you want to show clients that you can combine UX and SEO effectively. 

Make sure you have plenty of tools set up to offer reports and insights into the kind of changes that you may need to make to align with search engine expectations. 

Making the Most of UX in the SERPS

It’s easy to forget that there’s more to UX than making your buttons clickable on mobile devices or ensuring that scrolling feels smooth. For a designer or developer to deliver excellent UX for a brand, they need to consider every interaction that a company and customer has. 

This means starting with the way a website appears when it’s listed on the search engines most of the time. Getting your SEO listing right doesn’t just boost your chances of a good ranking. This strategy also improves your reputation with your audience and delivers more meaningful moments in the buyer journey. 

Don’t underestimate the power of UX in SERPs. 

 

Featured image via Pexels.

Source

The post 7 UX Principles to Boost SERPs first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Landing pages are crucial for conversions. User-friendly landing pages rank higher in the search engines and generate the maximum leads.

Interestingly, user behavior changes every year, and new website design trends should be kept in mind to continue acquiring sales from your existing landing pages.

If your high-performing landing pages in 2019 have suddenly started underperforming in 2021, then it is a clear indication that your landing pages need a strategic revamp to record higher conversions.

Landing page revisions are necessary for reduced bounce rate, more visitor time on the page, and better user actions.

This article will discuss some of the top web design trends of 2021 that brands have adopted to revamp their landing page designs. You can learn from the trends and apply your own custom design intelligence to redesign your landing pages for 2022 and convert the maximum number of visitors.

Let’s begin…

Why Landing Page Design Is Crucial For Conversions

Landing pages are the first stop on your consumers’ online buying journey and the first chance to put an impression.

People on the internet are becoming less patient. It takes only about 50 milliseconds for a visitor to form an opinion about a brand and decide whether they want to stay or leave the website.

Convincing modern customers to buy products or fill up query forms on a landing page is not easy with traditional website elements.

In 2021, it is now harder to impress visitors landing on your website than in 2019. Keeping in mind the audience of 2021 and beyond, an ideal landing page should be user-friendly, engaging, innovative and should encourage users to take action.

Here are some of the top reasons why landing page design is so crucial for conversions:

  • You get barely 7 seconds to create a strong impression. It is a time span in which visitors roughly scan the page and make their decisions.
  • Publishing 40+ effective landing pages at regular intervals can generate 12X more leads.
  • The average conversion rate from the landing page across all industries is only 2.35%.
  • Using the right types of targeting and testing can boost landing page conversion rates by up to 300%.

Considering the above stats, it can be easily said that a landing page has to be impressive and quick enough to impact the visitors positively.

7 High Converting Landing Pages & Lessons You Can Learn From Each

Below are some of the best high-converting landing pages, which were just updated recently in 2021. For each page, we list a lesson you can learn to inspire your next design revision in 2021 and ahead:

Example #1 – Replace Boring Customer Info Forms With An Interactive Quiz

Landing Page: Nextiva’s Unified Communications Readiness Quiz Landing Page

Industry: Voice Over IP software

Conversion Measured By: Leads fill out a form if they are interested

Redesign focus: Improve the quantity and quality of leads

Solution: Substitute online form with an interactive quiz

In 2019 and even 2020, many businesses were practicing the trend of including a customer form on their landing pages as a call to action to initiate a quick customer action.

The customer information form was useful for businesses because it helped them generate quick leads. However, at the same time, there was no real reason pushing the customer to fill in the lead forms especially if it consisted of more than 2-3 fields.

Nextiva used its creativity to replace boring lead forms with interactive quizzes. In its 2021 page design, the company added a quiz for visitors to participate in.

The aim is to have interactive pages to keep visitors engaged and persuade them to stay on the page.

Here are the comparisons of both the designs:

2019

2021

Key Takeaways:

  • The 2021 landing page now has a free Unified Communications Readiness Quiz that allows business owners to fill the form interactively. Adding a quiz with the number of pages mentioned at the top tells the user how many steps are left to complete the quiz, making their waiting time easier.
  • The background image is replaced with communication icons to simplify the message of the kind of services they offer.
  • The page looks neater and appears to be easier to scan at a glance.

Example #2 – Emphasize Strong Visuals and Copy that Stresses on Product Details

Landing Page: Western Rise Homepage Variation

Industry: Ecommerce

Conversion Measured By: Apparel purchase

Major redesign focus: Improve the number of leads

Solution: Improve the copy and visuals

Western Rise, a clothing eCommerce company, realized the importance of having impressive images and detailed product information on its landing page.

The 2021 page replaced ordinary product images with strong visuals of the models wearing Western Rise clothing. Also, the product image includes extensive product details, which were missing on the older page.

Here is a clear comparison of the 2019 vs. 2021 landing pages of Western Rise:

2019

2021

Key Takeaways:

  • The new landing page has a powerful headline – Performance Clothing for Travel, Work, and Play. In just a couple of words, the brand tells everything about itself. ‘Performance Clothing’ is their unique selling proposition (USP) that tells the customers that their product is durable. Besides, the caption ‘Travel, Work, and Play’ tells what the product is about. Modern customers like products that fulfill a particular need, and Western Rise made it easier for the users to realize the importance of their products which fulfilled their specific needs.
  • The bold visuals in the new page capture contemporary shots of the models that put a strong impression on the audience. Every image is clicked mindfully to explain the style and quality of the Western Rise clothing line.
  • The products displayed on the new page include every minor detail and feature that often other clothing brands ignore, such as the specialty of the product, occasions to wear, and weight other than colors, fabric, fitting, etc.

Example #3 – Use Strong Social Proof To Increase Conversions

Page: Aura Save 50% Landing Page

Industry: Identity Theft Software

Conversion Measured By: Online registration or an inbound call

Major redesign focus: Improve the number of signups

Solution: Add strong social proof

It is a known fact that social proof on sales pages is essential for increased conversions. But in 2021, the importance of social proof has gone too far.

Aura is an identity theft protection service that aims to build trust with its prospective customers when they first browse their landing page. Take a look at how Aura displays customer reviews above the fold to catch user’s attention.

Unlike others, Aura combined the rating stars and the review to prove customer satisfaction and emphasize their expertise in the field.

BONUS:

Another example of using strong social proof is the Exploding Topics newsletter landing page.

Exploding Topics is a newsletter with a pro subscription for content marketers and anyone interested in trending topics about any topic. It’s an excellent example that uses a lot of social proof on landing pages that give something away for free, like a weekly newsletter or an eBook.

If you could notice, the latest landing page below has multiple forms of social proof on a single page. First, they feature a list of brands that trust Exploding Topics. Secondly, they quote Wired Magazine founder Kevin Kelly’s feedback, followed by the logos and tweets praising the newsletter.

Key Takeaways:

  • Exploding Topics uses several different types of social proof that appeal to different demographics.
  • Their “trusted by” logos of world-renowned companies stand out to potential B2B subscribers.
  • Kevin Kelly’s quote is catching the attention of tech-savvy readers.
  • Despite packing the page with social proof, the opt-in form is still well above the fold. It is the best landing page practice that applies to nearly all pages.
  • The landing page uses actually embedded tweets (not screenshots), which help demonstrate that the tweets are legit.

While Exploding Topics have smartly used social proof on its page, the ideas of leveraging social proof are not limited to this only.

Example #4 – Focus On Visually Appealing Above the Fold Content

Landing Page: Perfect Keto Homepage Variation

Industry: Supplements

Conversion Measured By: Online purchase

Major redesign focus: Improve the number of purchases

Solution: Improve Above The Fold Content

Above the fold content greatly impacts customer’s decision-making. Perfect Keto lacked that appeal on its 2019 landing page design.

Hence, the 2021 design was revamped with better visuals and more professional looks.

The 2021 page received major changes in above-the-fold content, such as the top menu bar with the brand name not losing the user’s attention anymore and an additional menu bar giving a quick overview of what the brand offers.

The older page did have many social proofs, but those were limited to customers only. The 2021 design also highlighted the publications where the brand appeared, which proved exceptional in building customer trust.

Take a look at the two landing pages of Perfect Keto in 2019 and 2021:

2019

2021

Key Takeaways:

  • The 2021 landing page heading is more compelling because it clearly conveys what their product is all about. The older page was missing the actual purpose of the product.
  • An additional section on the new page to educate customers about the Keto diet and how to start it helps visitors understand the product even better.
  • The inclusion of a product image above the fold attracts user attention and makes the product trustworthy. People now know what they will be buying right at first sight of the page.
  • The new page proudly displays the products featured in the publications, such as Women’s Health, Healthline, Reader’s Digest, and Popsugar, which again helped customers trust the brand.
  • The page also features a video of the Perfect Keto founder that is brilliantly working in gaining visitor’s attention and faith.

Example #5 – Make The Call to Action More Compelling

Landing Page: Zendesk HelpDesk Softwage Landing Page

Industry: SaaS

Conversion Measured By: Online registration

Major redesign focus: Improve the number of registrations through the website

Solution: Make The CTA More Compelling

Zendesk did a clever job by replacing the sign-up form with a single button. On the older page, it was unclear to the user if the company has a trial option for free unless they move to linked pages. Such confusions often resulted in traffic bounces.

Adding the start free trial button on the 2021 page makes it easier for the users to understand that the product comes with a free trial. At the time, it helps the user take quick action.

Similarly, the ‘Get started’ button at the top was replaced with ‘Free trial’ with the same intention.

Moreover, chat support was added to guide users at any stage of the buyer journey. Live chats are vital to help visitors better understand the product and move a step ahead in the customer journey.

Take a look at below two images:

2019

2021

Key Takeaways

  • The CTA buttons have more actionable text and look more prominent.
  • The color choice for the button is in contrast with the background but matches the page theme.
  • The older page missed sales support, which is included in the new page for a better customer experience.
  • The tabs in the menu bar were reduced to four to make the page simple to use for users.

Example #6 – Use Contrast To Highlight Specific Copy On The Page

Landing Page: GetResponse Website Building Landing Page

Industry: Online Software

Conversion Measured By: Online signup

Major redesign focus: Improve the number of signups

Solution: Use contrast around important copy on the page

GetResponse focuses on attracting visitors’ attention towards the offerings from their business. Starting from above the fold section, the landing page highlights the texts that are important and need the visitors’ attention.

The infographic on the landing page is the next thing that promises to grab user attention while beautifully describing how this website builder works and is useful to the user.

Key Takeaways:

  • The text highlighted on the landing page draws the user’s attention towards what the business has to offer or unique selling points.
  • The infographics briefly explain the working of the tool in an easy-to-understand manner.
  • The Yellow color is used prominently on the landing page to attract user attention and persuades users to try the tool by listing its advantages.

Summary

Landing pages provide the first opportunity to create an impression in the minds of the consumers. A well-structured and mindfully designed page sets the right tone for your brand message and encourages users to choose your business.

However, the strategy for landing pages needs innovations from time to time for better results. The examples and tips shared above prove how landing pages in 2019 have seen significant improvement in 2021.

In the coming year, use these ideas to create landing pages that influence customer decisions and encourage them to take quick actions.

Source

The post 7 Landing Pages Comparisons To Improve Your Conversions in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Ready to take your business online but not sure where to start? It’s a surprisingly simple process, made all the easier by the tagDiv Newspaper theme that can shoulder the burden of code, leaving you to be creative.

Professional web designers normally begin with broad brushstrokes, roughly hewing a site, before finessing on the finer details; that’s exactly what tagDiv’s Newspaper theme lets you do, with innovative tools and a huge selection of pre-built options to choose from.

What is the Newspaper Theme?

Newspaper is the best-selling magazine theme from tagDiv. In constant development over the last twelve years, it’s been used to create world-beating sites for clients as diverse and demanding as United Nations, ShareAmerica, The Rackspace Blog, Bitcoin News, Uber Engineering, and Tech Explorist.

As the name implies, the Newspaper theme is primarily a magazine or blog theme, but you can use it for any kind of site, in any type of industry.

Packed with intuitive features that make personal web development not just possible but enjoyable, it will have your site ready to launch in no time.

It is fully compatible with Gutenberg, WordPress’ drag-n-drop site builder; it also comes with its own WYSIWYG, tagDiv Composer. All the sites built in Newspaper are fully flexible, responsive, mobile-friendly, and retina-ready. Newspaper is even fully integrated with WooCommerce so that you can transform your magazine site into a fully-featured ecommerce store.

Newspaper has been carefully coded to make the most of the upcoming Core Web Vitals update from Google, so your new site will be well-placed to rank highly on search engines.

Now that you know a little about the background of the Newspaper theme let’s look at how we can use it to build a WordPress site.

Pre-Built Websites

Sometimes it’s not just your coding skills but your design skills that are lacking; you know what kind of site that you want, you’re just hazy on the details.

This is where tagDiv’s Newspaper theme comes into its own. With a single click, you can install an entire pre-built website. And the process is so fast and convenient that you can try out as many as you like and pick the one that matches your vision.

You can even import a whole ton of pre-written content for testing the sites out, so you can see how it will look with your content without spending hours typing or copying and pasting text out of a Word doc.

There are 120 different designs covering all kinds of different industries. This means no matter what kind of site you’re building, one click, and you’re ready to go live.

Cloud Library

One step up from a full pre-built website is tagDiv’s Cloud Library. If you’ve installed one of the pre-built websites, this is probably where you want to go next.

The Cloud Library is a collection of 1600 different design elements that can be mixed and matched with live-editing to fast-track your site creation. You’ll find content blocks like headers, footers, testimonials, banners, and featured items. You can mix-n-match them however you please to create the site of your dreams.

Putting the “Cloud” into the Cloud Library are tagDiv’s servers, storing the code for each of these elements, so your installation only needs to load the code you actually use. This provides a huge boost in performance.

Composer

Lastly, the Newspaper theme provides tagDiv Composer, a specialist WordPress builder — like Gutenberg — that allows you to customize your website with absolutely no coding skills whatsoever. It’s a powerful yet simple-to-use tool that allows you to edit the elements of the Cloud Library and adapt them to your own purposes.

With Composer, you can create your own headers, footers, banners, text blocks, and more without any of the limitations of cookie-cutter design.

tagDiv Composer gives you the ultimate control over your site. You’ll find all the essential elements you need, from text and buttons to images and videos. All you have to do is drag and drop them into place.

Building a Site With tagDiv Newspaper Theme

As you can see that the fastest way to an engaging and original website is, to begin with, a pre-built site, then add the different blocks of code you want from the Cloud Library, and finally customize them with the Composer.

To make this possible, tagDiv has brought together experts from multiple disciplines, including brand strategy, project management, and web development.

It’s a slick system for quickly publishing high-quality sites that are unique to you and your business. Trusted by more than 130,000 customers worldwide, the Newspaper has earned tagDiv the status of Power Elite Author on ThemeForest and Top Author on Envato.

The Newspaper theme costs just $59, which includes six months of support from tagDiv, but for just $17.63, you can extend support to 12 months for added peace of mind.

tagDiv Newspaper is the simplest way for you to take your business online using WordPress.

 

[— This is a sponsored post on behalf of tagDiv —]

Source

The post Build Your Site The Easy Way With TagDiv Newspaper first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Looking to give your homepage a well-needed design update in late 2021 or 2022? Not a bad idea; first impressions are crucial when it comes to business websites. But, fixing your homepage and website design is no easy feat.

Web design trends are evolving faster. Blame the ever-decreasing user’s attention span. The average visitor now spends just 0.5 seconds scanning your homepage to form an opinion about your brand and decide whether to click through or bounce.

Increased user expectations and uncertainty in the user’s response, which is highly impacted by the site’s first impression, are other reasons to consider. This is why the designs which were trending in 2019 are no longer viable in 2021 or 2022.

We have curated the ten best examples of homepage designs to inspire your business in 2022, including a rundown of the best strategies and tips.

Let’s start by highlighting why homepage optimization is necessary for 2022:

Why Your Homepage Will Be So Important in 2022

Your website — especially your homepage — is your brand’s first chance to attract, build trust with, and connect with visitors.

According to recent statistics on why website design is important:

  1. 38% of visitors will stop interacting with a website if they think the layout isn’t visually appealing or intuitive. This creates a higher bounce rate and fewer conversions.
  2. 94% of a visitor’s first impression is based on website design (including colors, fonts, layout, navigation menus, etc.).
  3. 46% of people base a business’s credibility on the aesthetics of its website. Brands with less-than-stellar homepage designs are seen as less trustworthy than companies investing in the visitor experience.

Think of it the same way as walking into a brick-and-mortar store. Visitors are more enticed by a carefully curated ambiance of neatly stocked shelves and welcoming employees than a store that’s dark, messy, or seemingly unfriendly.

Using this logic, your homepage’s above-the-fold section is where you’ll greet visitors and reel them in for more.

10 Homepage Design Comparisons (2019 vs. 2021) To Inspire Your Business Website Design in 2022

Homepage design has come a long way since 2019. In this section, you will explore how.

These homepage designs crush it above the fold. Take just a few of these tips to heart, and your website will be poised to attract leads and conversions — no matter which industry you’re in.

1. Netflix – Crafting The Perfect Call To Action That Reduces Friction With An Additional FAQs Section

Most businesses make the mistake of adding a CTA button that first persuades the user to click on it and then asks for the visitor’s email address.

Netflix also did the same in its 2019 design.

However, Netflix combined both steps in its 2021 homepage design.

The new, improved 2021 homepage design asks for the user email address right up front along with the CTA button.

Here is a good comparison of both the designs:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The design encourages visitors to enter their email address right when they land on the homepage. As a result, form submission is much easier when the user has started the process. Hence, Netflix makes it easier for visitors to move along their conversion funnel nicely by reducing the friction.
  • The 2021 design also has a nice FAQ section that provides quick information about the company’s services and improves the overall user experience.
  • FAQs also help increase the organic presence of the website in the search engines because Google presents snippets from the FAQ section in the form of an answer box in the search results.

2. Spotify – Revamped Color Combinations For Improved CTA Visibility And Using The ‘Rule of Three’ For Heading Text

The older 2019 Spotify homepage design used light pink and orange colors in its home page main area. The CTA color was green, but if you look closely, the CTA lacks visibility.

The new 2021 design uses blue and green colors with a much larger font size for the main heading. The colors are attractive, and the CTA is visible clearly.

Here is the comparison of the Spotify homepage 2019 design vs. 2020 design:

2019 homepage design

Vs.

2021 homepage design

Key Takeaways:

  • Blue is the most versatile color, and green is the perfect choice for the CTA button. Spotify used universally accepted color combinations to redesign its homepage and made the CTA more visible.
  • The main heading is also made larger than it was in the 2019 design, and it follows the rule of three in writing which is effective and satisfying. It uses just three words in the main heading to allow the human brain to process information as a pattern that is more memorable.

3. Hulu – Give Priority To Your Brand Name And Hide Pricing

If you compare the Hulu 2019 vs. 2021 Hulu homepage, the brand name has been prioritized and shown as the main heading.

Moreover, the older homepage had pricing information everywhere, which has been reduced intelligently in the new design.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The brand name ‘Hulu’ is displayed as the main heading of the homepage, which helps to build audience trust.
  • The older design persuaded the users to pick a paid plan even though they had a free trial option—this discouraged users from trying their service. The new 2021 design encourages users to try the platform for free. In addition, the packages have prominent CTAs that mention “try for $0”. This design move improves conversions on the website.
  • The new design makes it easier for the visitors to select a viewing plan with easy comparison of the three available plans. The best part is, customers can start all the plans for $0. It’s a win-win situation for the users, and they can quickly pick a plan to start watching Hulu.

4. Nextiva – Reduce Visual Noise And Add Pictures In Menu To Improve UX

Nextiva realized the importance of reducing visual noise in its newly designed 2021 homepage. Visual noise happens when you use too many colors to attract user attention. Different colors compete with each other resulting in diluted customer observation.

In the old 2019 homepage, Nextiva used orange, blue, and green as the primary colors, while in the 2021 revamped design, they have used blue as the main color.

Here is a comparison of the two designs:

2019 homepage design

vs.

2021 homepage design

Moreover, the older homepage didn’t have an image in the product menu, but the new 2021 homepage improves the UX further.

Below is a comparison:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Nextiva used blue as their base color for the homepage design and removed orange and green colors to reduce visual complexity. This is an excellent change to keep the user’s attention focused. Notice the green colored bar at the top of the homepage in the 2019 version now replaced with blue.
  • The 2021 design has a clean look compared to the 2019 design, which looks scattered with too many different elements, including CTAs that confuse the users.
  • The product menu does an excellent job of linking intelligently to service pages such as phone systems and video meetings. The image of a smiling lady attracts users to click on Nextiva’s products to learn more about them. Improving UX is an impressive way to reduce bounce rates and increase time on site.

5. GoToMeeting – Avoid Lengthy Sign Up Form, Educate Users About Your Products, and Add Images That Depict The Current Needs of The Audience

GoToMeeting does a great job educating the users about their product by adding more content on the homepage that comprehensively explains their product features.

Moreover, they have replaced the older hero image with a new picture that portrays the changing needs of their audiences. Nowadays, there is a rise in work from home culture due to Covid-19. Hence, the photo and the heading text clearly target the needs of their users.

Here is a comparison of the 2019 vs. 2020 homepage of GoToMeeting:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The 2019 homepage design had a sign-up form on the homepage, which GoToMeeting removed in the 2021 design. People hate to fill in so much information right when they land on the home page. Hence, GoToMeeting did the right thing by removing the signup form from their homepage.
  • The hero image steals the show of the 2021 redesign because the picture of a working mom with her kid playing studying in front of her is a great way to portray the current needs of the society when over 60% of the employees are working from home. Audiences can quickly relate their working environment with the hero image leading to more sign-ups.
  • The older 2019 design was confusing, and it made little effort to help the users understand the different features of the product. The new 2021 homepage design has a product features section that explains the different features of the software. When users are educated about the product, they earn the confidence to try the product.

6. Zillow – Apply Hick’s Law To Allow Visitors To Take Faster Decisions

Zillow does an impressive job of applying Hick’s Law in allowing visitors to make faster decisions. Hick’s law states that the more options you present to the users, the faster they will decide. Therefore, it is a major factor in improving website usability.

The old 2019 homepage design of Zillow offered too many options to the users, like they want to buy, rent, or sell a property. The users first select either one of the three options and then enter the zip code to start their search.

The new 2021 homepage design changed that. Now, Zillow offers users a single option. They only need to enter the zip code to get started.

By reducing the number of actions that users need to take to just one, the homepage design eases the overall decision-making process of the site visitors.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The new homepage design has a simple search bar that persuades visitors to take prompt action.
  • The Hero image is placed smartly behind the search bar to depict the needs of the users accurately.
  • The homepage does have three different panels for buying, renting, or selling a home when the users scroll below. The old design is missing that. The new design removed so many options above the fold and kept just a single option for the users to encourage more users to search properties on the site.

7. Plex – Placement of Prominent Calls-to-Action On Homepage

The CTA is a key element of every website. It helps the users decide on their next action and helps to convert the visitors into leads.

Plex lacked an optimized CTA placement in its 2019 home page design. Hence, the 2021 design received an uplift to better place the CTA for increased visitor engagement.

Take a look at the home page designs of Plex from two different years. If you compare the two home pages of 2019 vs. 2021, the primary difference that will grab your attention is the CTA.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The call-to-action buttons are more prominent and have actionable texts.
  • The number of CTA buttons is increased to two to encourage users to take action.
  • The additional CTA button is wisely placed at the center to get immediate attention.
  • Note that the color choice for the button is also bright and highly contrasts with the background yet matches the color theme.
  • The old heading text ‘Stream Smarter’ was confusing because it didn’t help the users understand what Plex does. Hence it is now revised to ‘Watch Free Movies and TV on Plex.’ The new text is easy to understand and has the word ‘Free’ to increase the number of visitors clicking on the CTA.

8. Dropbox – More Above The Fold Content And Change of Fonts

Dropbox has significantly worked on its main content, which is clearly visible in the comparison homepage design images of 2019 vs. 2021.

The 2021 homepage is seen fixing faded, minimalistic, and less engaging content in the older homepage.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Sans serifs, with their clean readability, are included for longer bouts of the homepage.
  • Bold sans text is doing the job of drawing user attention effortlessly.
  • The color contrast of the text with the background is increased, which improves the visibility.
  • The right side image of a laptop is replaced with a screenshot of the software, which intrigues users to know more.

9. Cisco – Moving Blocks To Outsmart Competitor Websites

The homepage design of American technology company Cisco has seen a drastic change in 2021; it deserves to appear on this list. The company website smartly represents an appeal for future development through its killer homepage design.

Here is a comparison of the old 2019 homepage design vs. the new moving block design of 2021:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The home page contains moving blocks with news from the blog. As you hover over the image, it widens up, and a CTA button appears. The blocks represent a design of the future which the competitors might find hard to replicate.
  • Every block has a CTA, which was missing in the 2019 design. Each block represents a specific Cisco service and caters to the different needs of the visitors.
  • The new design is elegant and cleaner with lots of information.

10. Slack – Product Video On Home Page For More Conversions

Slack has made it easier for the users to understand the product well by using a video on the homepage.

The 2019 design has an image, while the 2021 design has a video that helps the visitors understand how the product works.

Here is a comparison of the 2019 design vs. 2021 design:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The inclusion of a product video leaves a great impression in the minds of the visitors and shows them what your product does.
  • Video helps Slack to make its value proposition clear and super fast.
  • Video has a strong correlation to conversions, and they work well as compared to hero images. Slack used a hero image on the homepage in 2019, but they replaced it with a video in 2021.

Final Thoughts on Using These Homepage Designs for Inspiration in 2021

By making it to this point in our guide, you now have plenty of inspiration to run with when upgrading your homepage. You should also have a better understanding of how powerful this tool may become for your brand.

So now it’s time to brainstorm how to use these ideas for your own 2021 homepage design. First, jot down the key points from this guide and honestly assess how your website currently compares.

Accomplish this task, and your brand might see an uptick in website traffic and conversions. It may even earn a spot in a roundup of killer website designs just like this one.

Source

The post 10 Homepage Design Comparisons to Inspire Your Business in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

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:

  1. Use Google Analytics to track metrics
  2. Get an SSL certificate
  3. Improve mobile page speed
  4. Design a mobile-first UI
  5. Make your site accessible
  6. Optimize your images
  7. Create great content
  8. Structure your content for scannability and readability
  9. Create click-worthy title tags and meta descriptions
  10. Choose one focus keyword per page
  11. Improve your internal link strategy
  12. Use only trustworthy external links
  13. Get your site listed as a featured snippet
  14. Get high-quality backlinks
  15. Create a Google My Business page
  16. Refresh Your Content
  17. 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

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

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:

  1. 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.
  2. 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.

Source

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


Source de l’article sur Webdesignerdepot

HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed.

Does that create more problems for us, though? Would we be better off starting over so we can make sure we’re all working from the same language rather than trying to edit out the bits we don’t want or need?

Problems With Holding Onto Legacy HTML

Let’s take a look at what happens when we amend the rules of HTML over time and how it impacts the Web:

1. It’s Risky to Leave Deprecated HTML Behind

Whether certain features have become outdated and need to go, or browsers have stopped supporting certain tags altogether, deprecated code eventually becomes a problem.

You’ll find a long list of deprecated HTML on the HTML.com website:

For many of these, HTML tags and attributes have been replaced by more efficient CSS styling. There are also examples of HTML deprecation because the features have become outdated (like frames).

Yet, there are still websites out there that contain deprecated HTML.

In some cases, the HTML sits silently on the other side of the website. If there’s enough of this errant code hanging around, though, those extra characters and directives could slow down your server’s processing time and render pages more slowly than usual.

In other cases, the HTML breaks features on the front-end of a website. Take, for instance, this warning from Mozilla regarding the <nobr> tag:

Using deprecated code can create inconsistent and poor experiences on the front-end. And when all browsers finally get on board and decide not to support an HTML tag anymore, all visitors will be left with a broken UI.

So, while it’s great that HTML5 has deprecated legacy HTML that’s no longer useful or necessary, that’s not to stop everyone from using it or leaving it behind on older websites. 

2. Legacy Code Focuses on Style; Not Semantics

As I mentioned, a lot of deprecated HTML has been phased out and replaced by CSS styling. And that’s a good thing.

Let me give you a simple example of this…

My favorite book is <i>The Stand</i> by Stephen King. The first time I read it, I didn’t sleep for <i>three days</i>. Thankfully, when I revisit it every year, I have fewer nightmares and can more greatly appreciate the storytelling aspect of it.

In the above paragraph, I’ve used the <i> tag to italicize several words.

In the early days of HTML,<i> stood for “italics” (the way<b> stood for “bold”). With HTML5, however,<i> will still render as italics, but its semantic meaning isn’t as broad. It’s been repurposed to indicate a stylistic change, which is important for things like book and film names, foreign words, and so on. To express emphasis, we use the <em> tag instead. 

Keeping the legacy <i> and <b> tags can lead to issues, though. 

In the statement above, I’ve italicized the name of the book (The Stand) as well as the number of sleepless nights I had (three days) with<i>. Whether the designer decides today, tomorrow or ten months down the road that they want to change the way literary or cinematic references are styled, my choice of HTML will stand in their way.

Because all of my italic text is indicated by <i>, styles can’t universally be applied to specific content (like book references). Instead, the designer would have to go through and clean up my code so that it looks like this:

My favorite book is <i>The Stand</i> by Stephen King. The first time I read it, I didn’t sleep for <em>three days</em>. Thankfully, when I inevitably revisit it every year, I have fewer nightmares and can more greatly appreciate the storytelling aspect of it.

This would then allow the semantically italicized content to remain intact while the designer or developer adjusts the styles of the book title here and across the site. (Though, really, the first italicized phrase should be surrounded by <cite> as it would be more semantically accurate.)

While it’s great that we’ve created guidelines for using legacy HTML today, keeping old code around can confuse writers, designers, and others who are familiar with the previous way of formatting content. By resetting HTML, throwing out old styles, and creating one language we use consistently across the web, we won’t create more work for ourselves later on.

3. Deprecated Code Hinders Accessibility

Another big reason why repurposed and deprecated HTML is a problem is because of accessibility.

For starters, when you leave deprecated and unsupported code behind, it’s likely to cause issues for screen readers, search engines, and browsers that use HTML for clues about the content.

Header tags (e.g.<h1><h2><h3>), for instance, aren’t just used to visibly break up large chunks of text. Header tags and, more specifically their hierarchy, present important information about the relationship between subjects on a page — and this is the kind of thing that screen readers and search engines pick up on.

That’s why we need to be very careful about the code we leave behind the scenes, even if readers on the front end can’t visibly see it. Let’s look at an example of how this can affect accessibility:

Is there an <i>à la carte</i> menu or is it just <i>prix fixe</i> tonight?

If a screen reader were to read over this sentence, the French phrases would be said with the same emphasis as any other italicized words on the page.

This is why HTML5 encourages semantic coding instead of purely stylistic.

The proper way to write HTML in the line above would be:

Is there an <i lang="fr">à la carte</i> menu or is it just <i lang="fr">prix fixe</i> tonight?

There are two reasons to do this:

  1. To indicate to screen readers that there’s a language change.
  2. To make it easier for designers or developers to create a custom style for foreign phrases.

Semantic coding is essential for designers that work on multilingual websites.

As the World Wide Web Consortium explains, languages like Japanese don’t use italicization or bolding for emphasis — at least not the way English speakers do.

So, to properly translate a page from English, a Japanese designer would need to remove the italics or bolding and add surrounding brackets to the words. However, if everything is coded with <i> and <b>, or there’s a mix of <i> and <em> and<b> and <strong>, it’s going to be really difficult to Find-and-Replace the correct HTML with ease.

So, if accessibility or internationalization are concerns for you at all, getting clear on the HTML you write with is going to be really important.

Wrap-Up

The fact of the matter is, it requires a lot of work to have the rules of HTML rewritten. So while it would be great to reset HTML, I don’t know that it’s all that practical.

All we can really do is stay abreast of what’s happening with the language, edit out legacy code from our websites the second it becomes deprecated, and always use tags and attributes that are supported. By playing around with deprecated or repurposed code, we only put the website visitors’ experience in jeopardy, so it’s best to take the time to clear out the old any chance we get.

If we can all get on the same page about this, problematic legacy HTML will eventually disappear from our websites and memories.

 

Featured image via Unsplash.

Source

The post Is It Time to Reset HTML? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot