Author: Franz Malten Buemann

This is part two of a series on email design essentials from our resident Art Director and design specialist, Tylor Loposser.

We covered the importance of strong email design principles and some of the basics in executing a well-designed campaign in part 1 of this series. Now we’ll cover some situational best practices and tips for getting the most value out of your designs.
Improving deliverability
The most beautiful, thoughtfully crafted email won’t get you far if it never even reaches the inbox.
When we’re talking about email deliverability, we’re talking about where the campaign lands once it’s accepted by the inbox provider. 80% of deliverability is influenced by your reputation as a sender, and the other 20% is the content of what you send.
To speak to the content portion of that stat, you should keep in mind that most major email providers like Gmail use algorithms that identify emails composed of all text or all images, which can be a spam trigger.
I like to use the 60/40 rule to avoid this. That’s 60% imagery and 40% text. Applying this mix makes for a very engaging email and helps to avoid these traps.
Also, If you are coding your own campaigns: audit your code!
Look for any broken markup or open tags; avoid redundancies. Concise code is “lighter” and has a better chance of landing in the inbox. Additionally, make sure you are in compliance with GDPR standards and CAN-Spam regulations.
The other portion to that stat is your reputation as a sender. This is predominantly influenced by the behavior of your subscribers, so keeping them happy and engaged is key. Here are some points to keep in mind:

Always create concise mailings with clear (and limited) calls to action. When content is heavy, analysis paralysis rears its ugly head and causes people to make no decision at all.
Show respect, and remember you’re a guest in your subscriber’s inbox. Be conscious of their time and let them know you are listening to them.
Personalization, but the type of personalized content that is beyond tags. Write copy that speaks to your subscribers directly; consider dynamic content to make their interests included.
Consider tone and use your brand’s personality to engage your users. This can be a great way at reminding your subscribers there is a human on the other end of these campaigns.
Always have plans for surveys and testing. Check with your audience and make sure you are meeting their expectations. I would recommend quarterly reviews and make revisions based on your findings.
And lastly: Strong. Memorable. Branding. If people don’t remember you, they will stop opening your emails. This inaction triggers some email clients to automatically move these mailings to the Spam folder.

Top tips for accessible email design
This is a really fascinating topic and gets back to what designers are really good at: Creating things for other people. It’s a process that begins with empathy and ends with us making sure we are creating paths for everyone.
These tips are focused on designers, but keep in mind this effort requires many different disciplines.

Alt text is something that you should be doing already, but make sure it’s descriptive. People with vision impairments rely on this data.
Remember what we learned about hierarchy in part 1? It plays a role in accessibility as well. The definition you create helps with cognitive retention.
Pay attention to your colors, especially when it comes to copy. This is all about how two colors react when they are placed next to one another. There are tons of online tools that can aid designers to create color combinations that help improve legibility. This should be considered for any copy in your mailing, including your CTA. Interesting fact: A loss of the ability to recognize red and green is the most common type of color blindness
Guard your buttons. Don’t use images for CTAs. Use inline links or bulletproof buttons.
If you want to use inline links, give them two characteristics to indicate that they are interactable (ie: bold + color, underline + bold). Do not let color alone be an indicator that something is clickable.
If you want to go with buttons, Campaign Monitor’s editor uses what we call ‘Bulletproof Buttons.’ They are composed of HTML (color/shape/text); which ensures rendering in all cases.
Use as much live text as possible, as opposed to using images as text/images with text overlayed. Live text can be picked up and read by screen readers.

Pay attention to your alignment: Any copy that is longer than three lines (this includes when the mailing is on a mobile device) should always be left-aligned.

Integrating video in email
 
Currently there are only about five email clients that reliably support watching videos inside of a campaign. But if you’re interested, there are some great 3rd party services such as Liveclicker that can allow you to set up videos and embed that code into your template HTML.
This would typically only be available to people using the Template Builder and someone who is an email developer with some comfort getting their hands dirty in code. So there are some additional costs and skills that are needed to achieve this.
On the other hand, we have 13 email clients that support animated GIFs. An option is to create an animated GIF using some of the frames from your video and place a play button over the top, this creates movement and mimics a video, then link that image out to wherever your video is hosted.
Animations of all types have been shown to increase engagement and render additional clicks. This option is a lot more attainable if you have limited resources (money, time, skills)
How to design for dark mode
More and more email clients are providing a ‘dark mode’ option for their apps and web experiences. Best practices for dealing with dark mode in email are still evolving, but I do have some tips:

With images, you have two options. You can save out JPegs that will maintain their backgrounds, so you’ll have a banding effect throughout your campaign. Or you can save your images out as PNGs, giving you a transparent background and allowing your images to appear cut out on top of the dark mode background. It’s a matter of preference; once you’ve tested, see what works for you.
You can apply white outlines or an outer glow to any dark logos/icons that are PNGs to keep them from being hidden in dark mode. On a white background, the additions you make are going to be invisible.
Your CSS style attributes like background, color, background-color, bgcolor or color are what is affected by the mail client when entering dark mode. HTML copy will reverse to white text automatically. There are image swaps that can be accomplished by media queries for dark mode preferences. You can also apply underlines for dark mode to make inline CTA’s continue to stand out. All of the control happens in the CSS.
I’d recommend creating a testing ring. Like all mailings, make time for testing before the big send. Send tests to co-workers with different dark modes/email clients to start to get a picture of what your mailings will look like in many different scenarios.
Also, you can always try changing your background to black in the template as a quick way to get a glimpse. Inside of the Campaign Monitor Editor, you’ll find the background color option once you’ve clicked on the gear icon in the top left-hand corner.

Wrap up
Design isn’t just about making emails pretty and packaging them up nicely; it’s a fundamental component of marketing and your relationship with customers. It can inspire loyalty, elicit engagement, compel action and express emotion. It even influences whether you end up in the Spam folder!
There’s a lot to balance and consider. Don’t forget; you can always turn to our pre-built email templates designed to get results so you can stay focused on the content, message, and strategy. And our Free Image Gallery lets you add stunning, high-quality images into your campaigns with no cost or hassle.
The post Email Design Fundamentals: Part 2 appeared first on Campaign Monitor.

When it comes to designing or redesigning a website, it’s easy to get hung up on the aesthetics. Does that shade of blue look right? Should the logo be on the right side of the screen, or left? What if we put a giant animated GIF in the middle of the page?
However, in a world where folks have more than 1.8 billion websites they can potentially land on, you need to make sure yours is not just a pretty face. It should be designed for usability, how easy your website is to use, and user experience (UX), how enjoyable it is to interact with your website.
Now, you could spend years studying the ins and outs of these disciplines But for the sake of giving you a jumping-off point, we’ve assembled a list of the fundamental guidelines and best practices you can apply to your next website redesign or website launch. Then, we’ll review 10 features you’ll need on your site to put these recommendations into practice. Let’s dive in.

1. Simplicity
While the appearance of your website is certainly important, most people aren’t coming to your site to evaluate how slick the design is. They want to complete some action, or to find some specific piece of information.
Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they’re trying to accomplish.
From a usability and UX perspective, simplicity is your best friend. If you have all the necessary page elements, it’s hard to get too simple. You can employ this principle in a variety of different forms, such as:

Colors: Basically, don’t use a lot. The Handbook of Computer-Human Interaction recommends using a maximum of five (plus or minus two) different colors in your design.

Typefaces: The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. For text color, again, keep it minimal and always make sure it contrasts with the background color. A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.

Graphics: Only use graphics if they help a user complete a task or perform a specific function (don’t just add graphics willy-nilly).

Here’s a great example of a simple but effective homepage design from HERoines Inc:

Image Source
2. Visual Hierarchy
Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.
Remember, when it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.
In the example below from Spotify, you can see that the main heading “Get 3 months of Premium for free” sits atop the visual hierarchy with its size and page position. It draws your eye to their mission before anything else. This is followed by the “Get 3 Months Free” CTA, which prompts action. Users can click this CTA, or scan the menu items above for more actions.

Image Source
3. Navigability
Planning out intuitive navigation on your site is crucial to help visitors find what they’re looking for. Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.
Here are a few tips for optimizing your site’s navigation:

Keep the structure of your primary navigation simple (and near the top of your page).
Include navigation in the footer of your site.
Consider using breadcrumbs on every page (except your homepage) so users remember their navigation trail.
Include a search bar near the top of your site so visitors can search by keywords.
Don’t offer too many navigation options per page. Again, simplicity!
Include links within your page copy, and make it clear where those links go.
Don’t make users dig too deep. Try making a basic wireframe map of all your site pages arranged like a pyramid: Your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it’s best to keep your map no more than three levels deep. Take HubSpot’s site map, for example.

Image Source
One more pointer: Once you’ve settled on what your site’s main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on every page.
This leads us nicely into our next principle…
4. Consistency
In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site’s pages. Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability and UX.
That’s not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you’ll make it easier for visitors to understand what type of information they’re likely to find on a given page.
In the example below, you can see that Airbnb uses the same layout for all of its “Help” pages, a common practice. Imagine what it would be like from a visitor’s perspective if every “Help” page had its own, unique layout. There would probably be a lot of shoulder shrugging.

Image Source
5. Responsivity
According to Statista, 48% of page global views were from mobile devices like smartphones and tablets. And according to our research, 93% of people have left a website because it didn’t display properly on their device.
The takeaway here: To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design.
Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using. This can be accomplished with mobile-friendly HTML templates, or by creating a special mobile site.
Ultimately, it’s more important to provide a great experience across different devices than look identical across those devices.

Image Source
Alongside mobile-friendliness, it’s worth your while to test your website’s cross-cross browser compatibility. In all likelihood, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else.
Now is the time to open your pages on each of these browsers and evaluate how your elements appear. Ideally, there won’t be much difference in presentation, but you can’t know for sure until you see for yourself.
6. Accessibility
The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience. As a website designer, it’s your job to think of these users in your UX plan.
Like responsiveness, accessibility applies to your entire site: structure, page format, visuals, and both written and visual content. The Web Content Accessibility Guidelines (WCAG), developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for web accessibility. In a broad sense, these guidelines state that websites must be:

Perceivable: Visitors are aware of the content on your site.

Operable: The functionality of your website should be possible in different ways.

Understandable: All content and alerts can be easily understood.

Robust: Your website is usable across different assistive technologies, devices, and browsers.

For a deeper dive into this topic, see our Ultimate Guide to Web Accessibility.
7. Conventionality
A big challenge in web design is balancing originality with your expectations. Most of us are expert internet users, and there are specific conventions we’ve grown accustomed to over time. Such conventions include:

Placing the main navigation at the top (or left side) of a page.
Placing a logo at the top left (or center) of a page.
Making the logo clickable, so it always brings a visitor back to the homepage.
Having links and buttons that change color/appearance when you hover over them.
Using a shopping cart icon on an ecommerce site. The icon also has a number badge signifying the number of items in the cart.
Ensuring image sliders have buttons users can click to manually rotate slides.

While some might opt to throw these out the window for the sake of uniqueness, this is a mistake. There’s still plenty of room for creativity within the constraints of web conventionality.
Let’s briefly consider another field of design, architecture. Building codes are put in place so that folks can easily and safely inhabit spaces. An architect doesn’t complain about these codes or violate them because, aside from legal repercussions, they assure safety and comfort of guests. It doesn’t matter how dazzling the building looks — if you trip on uneven stairs or you can’t get out in a fire, you might prefer to stay outside.
In the same way, you can craft a memorable experience while meeting user expectations. If you violate what users anticipate, they may feel uncomfortable or even frustrated with your site.
8. Credibility
Sticking to web conventions lends your site credibility. In other words, it increases the level of trust your site conveys. And if you’re striving to build a site that provides the best user experience possible, credibility goes a long way.
One of the best methods to improve your credibility is to be clear and honest about the product or service you’re selling. Don’t make visitors dig through dozens of pages to find what it is you do. Be up-front on your homepage, and dedicate some real estate to explaining the value behind what you do.
Another credibility tip: Have a pricing page, also linked on the homepage. Rather than force people to contact you to learn more about pricing, list your prices clearly on your site. This makes your business appear more trustworthy and legitimate.
Here’s an example of an effective pricing page from the Box website:

Image Source
9. User-Centricity
At the end of the day, usability and user experience hinge on the preferences of the end-users. After all, if you’re not designing for them, who are you designing for?
So, while the principles detailed in this list are a great starting point, the final key to improving the design of your site is to conduct user testing, gather feedback, and implement changes based on what you’ve learned.
And don’t bother testing usability by yourself. You’ve already invested a lot of time into your design, which brings your own biases into the equation. Get testers who have never seen your site before, the same as any first-time visitor.
Here are a few user testing tools to get you started:

Website Grader: Our free tool evaluates your website based on several factors: mobile, design, performance, SEO, and security. It then offers tailored suggestions for improvement. You can learn more about Website Grader in our dedicated blog post.

Crazy Egg: Track multiple domains under one account and uncover insights about your site’s performance using four different intelligence tools — heat map, scroll map, overlay, and confetti.

Loop11: Use this tool to easily create usability tests — even if you don’t have any HTML experience.

The User Is Drunk: Pay Richard Littauer to get drunk and review your site. Don’t believe me? We tried it.

For even more helpful options, see our list of the best user testing tools.
Hopefully, these guidelines are useful in informing the structure of your web pages and website as a whole. But, how does one put these guidelines into practice? Let’s take a look at some actionable best practices you can follow during the design process. 
1. Select a typography that’s easy to read and skim.
Typography refers to how type — meaning letters and characters — are arranged and presented on the page. Since website typography affects not only how we read but how we feel about text on a web page, it’s important to pick carefully. 
Ideally, you want a typeface that is:

easy to read
easy to skim
accessible to all users
legible across multiple devices and screen sizes

You also want it to match the look and feel of your brand. For example, the luxury fashion brand Burberry refreshed its logo for the first time in 20 years in 2018. It replaced the old serif typeface with a bold, all-caps, sans serif typeface and dropped the knight emblem. The result is a simpler and more modern-looking logo that’s easier to read on any screen — and that reflects changes in the company to become more transparent and appeal to a younger generation. 

Image Source
2. Choose a color scheme that suits your brand.
Like typography, color can affect not only how we understand and interact with content, but how we feel about it. Your color scheme should therefore check off the same boxes as your website typography. It should:

reinforce your brand identity
make your site easy to read and navigate
evoke emotion
look good

Buzzfeed, for examples, uses the primary colors yellow and red to grab users’ attention and get them excited about the content. It reserves the use of the primary color blue — which is associated with trust — exclusively for links and CTA buttons. Both emotions are ideal to evoke for a media site. 

Image Source
3. Use white space to break up text and other elements.
Whitespace refers to the negative areas in any composition. Whitespace provides users with visual breaks as they process a website’s design or content, which is not only aesthetically pleasing. By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what it’s important. 
That means you can use whitespace to avoid causing information overload or analysis paralysis — and to emphasize important elements on the page. This might help persuade users to take a specific action, like sign up for a newsletter, shop your latest collection, and more.
For example, Eb & flow Yoga Studio uses whitespace to lead users toward a specific action: to sign up for three weeks of classes. Notice that whitespace doesn’t mean the absence of color or imagery. Instead, it means that every element on the page is positioned strategically, with lots of space in between, to avoid overwhelming or confusing visitors. 

Image Source
4. Use texture to add personality and depth.
Resembling a three-dimensional, tactile surface, web textures aim to replicate the physical sensation of touch with another sensation — sight. They’re a great design alternative to solid color backgrounds, particularly if you want to add personality and depth to your site. 
Take a look at the texture on the homepage for the Santa Barbara-based restaurant Mony’s Tacos below. It looks like chalk drawn on a blackboard, doesn’t it? I don’t know about you but I can almost feel the chalk on my fingers just from looking at it. It’s the perfect look for a restaurant that aims to be California’s preferred Funk Zone choice for Mexican delights.

Image Source
5. Add images to engage and inform readers.
Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. You’ve probably heard the statistics that people remember only 20% of what they read, but 80% of what they see? While the exact percentages are debated, the basic idea isn’t. It’s easier for some people to learn and process information visually.
Here’s a unique example of breaking up text with images from a cosmetic company’s website. This shows how endless the possibilities of incorporating imagery into your website design are. 

Image Source
6. Simplify your navigation.
Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse, or click the “Back” button. That’s why it’s important to keep it as simple as possible. 
Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header. 
Take the navigation bar on Blavity as an example. The sections featured include three content categories — “News,” “Op-Eds,” and “Lifestyle” — as well as links to their submission page and sign-up page. This provides visitors with easy access to the pages they’re likely looking for. Other nav items are placed in a dropdown menu labelled “More” so they’re still easy to find but not cluttered into the top-level navigation. Finally, the navigation bar is sticky so visitors won’t have to scroll up and down the page to browse the site. 

Image Source
7. Make your CTAs stand out.
CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.
You want your CTAs to pop in your website design. To make that happen, consider how you’re using color as well as other elements like background color, surrounding images, and surrounding text.
Square provides an excellent call-to-action example. Using a single image to showcase the simplicity of using their product, Square uses bold typography to also show how unique and future-oriented their product is. Against this dramatic backdrop, the blue “Get Started” CTA awaits your click.
Image Source
8. Optimize for mobile.
We’ve already discussed how important it is for your website to be responsive. But since mobile devices accounted for 59% of organic search engine visits in 2021, we’re doubling down on how important it is to design your website to be mobile-friendly. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time. 
For an example of one of the best mobile website designs, compare Etsy’s homepage on desktop vs mobile. On desktop, you’ll see a navbar with categories. Hovering over each category will reveal a dropdown menu.

Image Source
On mobile, this collapses behind a hamburger button, which improves the appearance and performance of the mobile site. You’ll also notice that the images are larger — perfect for tapping with your finger on a mobile screen.

9. Limit the options presented to users.
According to Hick’s Law, increasing the number and complexity of choices will increase the time it takes for a person to make a decision. This is bad news in website design. If a website visitor is presented with too many options, they might get frustrated and bounce — or they might pick an option you don’t want, like abandoning their cart. That’s why it’s important to limit the number of options presented to a user. 
For example, a visitor landing on the homepage of Shawn Michelle’s Ice Cream will have three options: to learn more about the company, the flavors, or the ingredients. But instead of presenting all three options at the same time, they are presented one at a time in a slider. This is a great example of implementing Hick’s Law in UX design. 
Image Source
Now we understand the principles and best practices that should guide you throughout the design process. In the next section, let’s run down the essential page elements that you should strongly consider including in your design plan.

1. Header and Footer
The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage, to your blog posts, and even your “No results found” page.
Your header should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and/or a search bar if well-spaced and minimal. On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.
2. Menu Navigation
Whether it’s a list of links across the header or a tidy and compact hamburger button in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages. A good menu limits the number of clicks to reach any part of your website to just a few.
To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot’s homepage.

3. Search Bar
In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword. If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching. Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.
4. Branding
Remember the conventions we’ve discussed? One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors’ eyes will instinctively shift to this region to check they’re in the right place. Don’t leave them hanging.
To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create. That’s why we recommend establishing brand guidelines if you haven’t already — check out our style guide for a reference.
5. Color Palette
Color choice plays a major role in your site’s usability and UX as well. This decision tends to be more subjective than other requirements in this list. But, like everything else we’ve discussed, try to simplify — limit your color selection to 3-4 prominent colors at most.
Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don’t, but we stumble when trying to pick from the infinite combinations available.
The solution? Try a color palette that’s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes to get started.
6. Headings
Headings are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages. As users skim your pages what you need, a clear and to-the-point heading alerts readers to stop scrolling after finding what they want. Use only as many headings as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.
7. Clear Labels
Whenever a user takes an action on your website, it must be obvious exactly what they’re doing and/or where they’re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose. The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).
For example, a button linking to a pricing page should just read “Pricing” — anything beyond that (e.g., “See our prices”, “Check out the pricing page for a deal”) is superfluous. A search bar/button only needs a search glass icon (🔍), and perhaps also the word “Search”, to denote its purpose.
User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can’t be said for a new user. Testing will give valuable insight into what users think your labels mean beyond your own perspective.
8. Visuals and Media
When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices. These elements will draw attention over most other text and will likely stay in users’ minds, so choose wisely.
Here’s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.

Image Source
Also, all images and videos should be optimized for search engines and include descriptive alt text for accessibility.
9. Calls to Action (CTAs)
Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.
A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting like many click-through ads tend to be.
If you need ideas for sleek CTAs that drive more conversions, see our CTA examples list.
10. Whitespace
As mentioned above, sometimes it’s about the elements you don’t include. After reading these guidelines and requirements, you may feel tempted to stuff your pages with all the bits and bobs needed for a flawless UX. Don’t forget that your viewers need room to digest all this new info, so give your elements room to breathe.
But, how much whitespace should you have? That’s another personal call, and varies from site to site. So, user testing is handy here as well. What are people focusing on? Do they feel overwhelmed with the density of content? Once again, it all ties back to our first guideline, simplicity.
Design that Puts Users First
Indeed, web design is largely subjective — your website’s look and experience isn’t going to please everyone. However, there are also tried-and-true UX principles that, when carefully considered and incorporated, help visitors feel more at home.
According to Amazon Web Services, 88% of website visitors are less likely to return to a website after a poor experience. And how could you blame them? We’ve surely all been there.
So, as a final bit of usability/UX wisdom, start caring more! Imagine yourself into the shoes (or, more accurately, browser windows) of your visitors, and keep them in mind every step of the design process.

Getting lost sucks. It doesn’t matter if you’re in a city or a corn maze, the ambiguity of not knowing where you are and what could happen next can make you break out in a cold sweat.
Website visitors feel the same way when they land on a jumbled website. Nearly one in two people leave a website after visiting just one page. We don’t have a lot of time to make a good impression on a user, and with a poor site architecture, you’re guaranteed to increase bounce rates.
It’s critical to structure your site in an intuitive and easy-to-navigate way to retain your audience’s attention. If you don’t, they’ll bounce in seconds. And if people leave your website because your user experience is messy, search engines won’t think highly of you, either.
If you need help structuring a website that will engage an audience and rank on Google, we’ve got you covered. We’ll teach you what website architecture is, why it’s important for UX and SEO, and how you can develop a sound architecture for your own website.
Without question, your website structure plays a critical role in retaining users and boosting conversions.
Implementing a website structure helps you design your website for the user experience. You might have the most amazing content, but if users can’t find it, they’ll leave for a competitor’s site.
A typical website structure looks like a rooted tree graph, in which the home page is the root. The pages that are linked out from the home page are branches, and from there, each page has additional branches sprouting from it. These branches then link to each other.
Here’s what that typically looks like:

Why is website structuring important?
A sound website architecture strengthens your website’s user experience. When you structure your website in an intuitive way, users can seamlessly find the information they’re looking for.
Plus, when your user experience is strong, your search engine rankings will be, too. Users will spend more time on your website and link to your web pages, which are both heavy indicators that your brand creates quality content.
Furthermore, a solid website architecture:

Helps search engines effectively crawl your website.
Encourages deep site navigation by providing more pages for users to visit.
Distributes “page authority” more equitably, so that a page isn’t left out.
Strengthens topical authority because of the strong internal linking structure between related or similar topics.
Increases conversions by making it easier to find products and lead-generating content.

Let’s take a look at a few best practices you should keep in mind when designing your site’s architecture.
1. Create a simple top-level navigation menu.
First, don’t provide too many top-level menu items. Second, be sure to deliver the content that’s promised based on the menu item’s name.
For instance, if your users click on the “Email Marketing” tab on your blog’s homepage, they expect to be directed to a list of email marketing posts. From this page, you also need to design a simple navigation path back to your blog’s homepage and your website’s homepage.
Check out an example below from our own website:

The menu is divided into three simple menu items: Software, Pricing, and Resources. Under the “Resources” tab, users can find different resources that are divided into different designations.
Don’t make your users think too hard. A hard-to-navigate website will have a high bounce rate. Users don’t want to waste time trying to find information on your site. If they do, they’ll just leave. So practice empathy and provide an intuitive web experience.
2. Keep your URLs simple and user-friendly.
No user wants to read an URL like this:
example.com/store/rackets/default.aspx?lang=en&category=98a20
It’s important to create user-friendly URLs. Most CMS systems, such as CMS Hub and WordPress, automatically create a user-friendly URL based on your page’s title. It will usually read as follows:
example.com/page-title
You can also create subdirectories that are easy to follow.
example.com/topic/subtopic/page-title
Tip: While subdirectories are helpful from a UX standpoint, they aren’t required to reflect your site’s architecture. Internal linking matters more than URL structure. That means that you can can structure your URLs as follows:
example.com/topic
example.com/subtopic
example.com/longtail-keyword-one
example.com/longtail-keyword-two
You simply have to connect them to each other and to their parent pages with internal links.
3. Model your website architecture after the top players in your industry.
Your customers are used to the website architecture of major brands in your industry, so if you run an ecommerce store, analyze how Amazon structures their website and emulate them. Your website will seem more familiar and, in turn, easier to navigate.
4. Keep your website consistent.
Your website’s navigation format, design principles, and link displays should all follow a consistent pattern. Keeping these elements the same will keep your users on your site longer because it’ll be easier for them to quickly navigate to new pages and click on links.
5. Implement the pillar-cluster internal linking model.
In the pillar-cluster model, you have a parent page (the pillar) linking out to child pages (the cluster). These child pages then link to each other, creating a cluster.
This model makes your internal linking structure clearer and effectively directs users to other pieces of relevant and useful content. When users come across an internal link on your website, they should immediately understand which piece of content the link will direct them to and why that content is linked from the page they’re currently on.

Here’s what a pillar-cluster linking strategy looks like for a blog about workout routines.

The lines represent internal links.
One internal linking caution you should exercise, though, is not stuffing keywords into your link’s anchor text. This is called black hat SEO, and to prevent it, Google has created specific algorithms to punish this kind of behavior.
6. Provide access to most of your website’s pages in 3-4 clicks.
Even if your website has a million pages, the architecture should allow users to start from the homepage and end up on any page within three to four clicks.
To do this, design a top-level navigation that can direct users to your website’s main categories. Then, from each of your website’s main category pages, make sure they can click-through to all the sub-category pages.
7. Use breadcrumbs.
After internal linking, breadcrumbs are the ultimate way to show your website’s architecture. These links show a page’s parent pages all the way to the home page. They’re typically placed above the page’s title and have arrows showing the path to the current page.
Here’s an example from Best Buy:

You can add breadcrumbs to your CMS Hub website by creating an advanced menu module. If you run your website on the WordPress CMS, we’ve written an easy tutorial on how you can add breadcrumbs to WordPress.
8. Create an HTML and XML sitemap.
A sitemap is a document that lists out all of the crawlable pages on your website. It’s exceedingly important for website architecture because it shows your structure in a readable, crawlable format.
An HTML sitemap is user-facing and has the same design as the rest of your website. It’s typically designed for users who can’t find a certain page and who’d benefit from seeing a list of all of your pages.
Here’s eBay’s HTML sitemap as an example:

An XML sitemap is designed primarily for search engine crawlers. They list all of the URLs in a plain-text format. If your site is on WordPress, you can use a sitemap plugin to create both an HTML and XML sitemap.
Upgrade Your Website Architecture and Improve Your SEO
Your website’s architecture is incredibly important for both user experience and SEO. With a solid website structuring strategy, you’ll improve dwell time and entice users to consume more of your content. That means more conversions down the line, improving your ROI and increasing revenue at your company.

Editor’s note: This post was originally published in October 2018 and has been updated for comprehensiveness.

If you’ve spent any time on the internet, chances are you’ve encountered an HTTP status code.
In simple terms, HTTP status codes are standard response codes that show the relationship between all the things that go on in the background when you travel from web page to web page. Things like the user agent (i.e., your web browser), the server, the web page you’re trying to load, and any third-party web applications you might be running.

Because of the complexity of how all those elements interact, there are many possible HTTP status codes you can run up against.
HTTP status codes identify and diagnose the particular blocker preventing you from loading a resource, and can give you information about the journey you took on the way to a page.
In this article, we’ll cover what you need to know about the HTTP 302 status code – jargon-free.
For starters, it’s helpful to know that all HTTP messages with 3xx are redirection messages.
Say blog.hubspot.com no longer exists, and the content is now permanently housed on blogging.hubspot.com. This would trigger a 301 status code, which indicates a permanent redirection from one location to another.
The 302 redirect, on the other hand, is only temporary. A good example of when to use a 302 status code is for localization and language purposes.
For instance, if you visit a clothing website based in the United Kingdom but you are located in the United States. A 302 redirect would send you to the US version of the site to ensure the currency and other content are displayed correctly, according to your location.
You can also use a 302 status code when:

Redesigning a page – You can send users to a temporary location while the other page is under construction.

Conducting A/B tests – Want to test a new page and get feedback on its performance? You can do this with a 302 redirect without hurting your ranking.

Running a promotion – To drive traffic to a particular offer, you can set up a temporary redirect for a page that usually includes other content.

A product is sold out – In the case of a sold-out or temporarily unavailable product, you can redirect users to a related page until it is available again.

While this list is not exhaustive, here’s the golden rule to keep in mind: Only use a 302 redirect if the change is temporary.
Furthermore, a 302 status code happens on the server-side and shouldn’t be noticed by users if set up correctly. The web server serving up the 302 redirect will immediately indicate the new location of the page to your browser (and search engines) and should send users there right away.
How a 302 Status Code Affects SEO
From an SEO perspective, it’s important to understand how a 302 status code can impact your ranking and when you should use it.

Firstly, if the location of a page has changed and a redirect has not been set up, this can lead to a 404 status error (i.e., your page cannot be found) and affect your ranking. After all, Google won’t want to send users to a page that leads to nowhere.
One benefit of using a redirect like this is that you don’t have to sacrifice your ranking when you temporarily send users elsewhere.
Say you’re using it to redirect users from a sold-out product page to a relevant product page. You wouldn’t want your unavailable product’s page to drop in ranking, just because it’s currently unavailable. With a 302 status code, you can maintain your ranking.
However, this also means that your temporary URL will not benefit from any link juice because Google knows it won’t be there long.
For comparison, a 301 code typically sends most link equity to your new URL, but your page can experience some drop in ranking as a result of the redirect.
How to Identify & Implement an HTTP 302 Error
If you want to see when you’ve encountered a 302 redirect (or any type of redirect), consider using an application or Chrome extension (like this one, Redirect Path). This type of tool will show you directly in your browser when you run into a redirect.
You can also view and implement the code from the backend by accessing your .htaccess file. To avoid accessing this file, you can also install a redirect manager plugin or an SEO tool that includes a redirect manager (like Yoast SEO Premium).
Overall, you want to make sure you understand how redirection messages affect SEO. A 302 status code can be a great strategy when making temporary changes to your website, like testing new website features and product promotions.
So, when you’re debating between various redirection messages, make sure the one you choose aligns with your long-term strategy.

Knowing the ins and outs of Excel is essential for organizing data, understanding analytics, and getting the most from your marketing efforts. The tool is great for quickly processing vast amounts of data, but it can be overwhelming if you don’t spend the majority of your workday whipping up spreadsheets.

Fortunately, a few basic skills are all you need to put together an easy-to-read spreadsheet. One is knowing how to merge cells in Excel. Whether you’re planning blog articles for the upcoming quarter, creating an email list for a targeted campaign, or designing SEO-friendly Google ads, merging cells is a handy way to organize your information.

To sharpen your skills, we’ll cover several ways to combine cells.

How to merge two cells
How to merge and center cells
How to merge multiple cells
How to merge cells without losing data
A shortcut to merge cells
Why can’t I merge cells?

Don’t want to start from scratch? Use these free Excel templates as a foundation for your own marketing spreadsheets.
How to Merge Two Cells in Excel
Merging is a way to turn two small cells into one new, large cell. This is useful for organizing information and creating headers, without the need to resize individual cells. Here’s how to do it.
Step 1: Highlight the two adjacent cells you want to merge (I’m merging A1 and B1 in the example).

Source
Step 2: Under the Home tab, click the ‘Merge’ icon and choose ‘Merge Cells’.

Source
Step 3: That’s it! You’ve merged the cells.

Source
Note: When combining cells, only the data in the upper left cell is saved. Make sure to save the information from the other cell so it’s not lost. If you happen to have data in both A1 and B1, Excel won’t simply wipe it. This alert will pop up:

Source
Don’t want to delete the data? Click ‘Cancel,’ and copy/paste the information into a separate document or cell before merging. If you only need the information in the upper-left cell, click ‘OK’ to merge the cells.
How to Merge and Center Cells in Excel
Say you’re building a marketing report and want your titles to be centered above your data. Merge and center cells by following these steps.
Step 1: Highlight the cells you want to merge.

Source
Step 2: Under the Home tab, click the ‘Merge’ icon and choose ‘Merge & Center.’

Source
Step 3: Your cells will merge and the data will be centered within the cell.

Source
How to Merge Cells in Excel Shortcut
Clicking the correct ‘Merge’ function over and over can be a drag if you need to combine a lot of cells. For fast merging, start by highlighting the cells you want to merge. Then, type the following key combinations.
Excel Shortcuts for Windows

Merge Cells: ALT H+M+M
Merge & Center: ALT H+M+C
Merge Across: ALT H+M+A
Unmerge Cells: ALT H+M+U

Excel Shortcuts for OS
The Apple operating system doesn’t have an ALT key, so you have to set up your own shortcut to merge cells.

In Excel, click ‘Tools’ under the navigation bar.
Select ‘Customize Keyboard.’
A pop-up will appear. Under the header ‘Specify a Command’ there are two columns: Categories and Commands. For Categories, select ‘Home Tab.’ For Commands, select ‘Merge Cells.’
Select the text box under ‘Press new keyboard shortcut.’ Type the key combination for your shortcut. For example: CONTROL+M.
Click ‘OK’ to set your shortcut.
You can now use CONTROL+M to merge cells in Excel.
Set up additional shortcuts for Merge Across, Merge & Center, or Unmerge.

Source
How to Merge Multiple Cells in Excel
You know the basics, but now you want to get creative and merge more than two cells. Depending on your desired spreadsheet layout, you can use the Merge Across, Merge Cells, or Merge & Center function.
1. Merge Across
This option is used to merge cells within a single row. You can’t use ‘Merge Across’ to combine cells within a column or across multiple rows.
In this example, I’m setting up PPC ads and want to see my description copy in row 17. If I simply resize column F, my table will have too much space between column F and G. Merging multiple cells across row 17 lets me see the copy and keep the table neat.
Step 1: Highlight all the cells you want to merge within the row.

Source
Step 2: Under the Home tab, click the ‘Merge’ icon and choose ‘Merge Across.’

Source
Step 3: The cells merge across the entire highlighted area.
Source
2. Merge & Center
You can merge and center multiple cells across rows and down columns. Just remember the data in the upper-left cell is the only information that will stay once merged. In the example below, I use ‘Merge & Center’ to combine rows 15, 16, and 17 with columns F, G, and H.

Source

Source
3. Merge Cells
The ‘Merge Cells’ function is ideal to combine multiple adjacent cells across rows and columns. It works just like the ‘Merge & Center’ function, except the data will be left-aligned instead of centered after merging.

Source
How to Merge Cells in Excel Without Losing Data
Want to merge cells without losing information from all but the upper left cell? Easy. You can use the ampersand (&) or the CONCATENATE function to combine data from two or more cells.
In the example below, I’m creating copy for Instagram and want to combine the caption with its corresponding link.
Ampersand
Step 1: Choose the cell where you want to put the merged data. Make sure this is separate from the cells you’re merging.
Step 2: Type = in the blank cell and select the first cell to combine.
Step 3: Type & and use ” ” to leave a space between cell data.
Step 4: Type & again before choosing the next cell. Repeat for all the cells you want to combine. An example formula is =D5&” “&E5.
Step 5: Hit Enter. In the example, you can see how the text from cells D5 and E5 merged into F5.

Source
CONCATENATE or CONCAT
The CONCATENATE function (or CONCAT) is another way to combine two or more text strings together.
The formula in Excel is =CONCATENATE (text1,text2,…). Text1 is the first cell to merge and can be a text value, number, or cell reference. Text2 is the next item to join. For this function, you can merge up to 255 items or 8,192 characters.
Step 1: Highlight a new blank cell where you want to merge the data.
Step 2: In the formula bar, type =CONCATENATE(

Source
Step 3: A formula builder will pop up, allowing you to choose Text1, Text2, and so on. Select the cells you want to merge, in order from first to last. To include spaces between the cell data, you must include ,” “, within the formula. [i.e. =CONCATENATE(D5,” “,E5)]

Source
Step 4: Hit Enter. The data from your selected cells will be combined in the CONCATENATE cell.

Source
Why Can’t I Merge Cells in Excel?
A lot can go wrong if your formula or formatting isn’t set up correctly. If you’re struggling to merge cells, try these troubleshooting tips.

Ensure you’re not actively editing a cell you want to merge. The ‘Merge’ icon will be shaded out if you’re in the middle of making changes. To fix this, simply hit ‘Enter’ to stop editing or click onto another cell before clicking back to the cell you’d like to merge.

Check if one of the cells is part of an Excel table. Tables have a unique format that don’t allow merging. You can tell you’re on a Table if the ‘Chart Design’ or ‘Format’ tabs across the top of your workbook are highlighted in green and the ‘Merge’ icon is shaded out.

Look at the sharing permissions of the Excel workbook. If it’s not shared with you or is protected, you won’t be able to make any changes or merge cells.

How to Unmerge Cells
Maybe you got a little excited trying out your new skills and merged one cell too many. Don’t panic. Simply unmerge your cells by following these steps.

Highlight the cells you want to unmerge.
Under the Home tab, click the ‘Merge’ icon and choose ‘Unmerge Cells.’
Your cells will go back to the original formatting, but you will have lost the information from before the merge.
If you need that information, click ‘Command’ + Z (OS) or ‘CTRL’ +Z (Windows) to undo your actions until you see the data pop up.

Consumers engage with their favorite brands through multiple channels. They’re using a combination of web, social media, email, and live chat to buy products online. And they’re doing so from different devices — smartphones, tablets, and desktops.  It’s more important than ever for businesses to align their marketing strategies to create a more consistent shopping…
The post 5 Best Omnichannel Marketing Practices to Grow Your eCommerce Business appeared first on Benchmark Email.

 

 

Business Intelligence (BI) is a process that uses a variety of tools to help companies collect, analyze, present, and integrate data to produce actionable insights. With as many as 46% of companies using BI tools as a key part of their business strategy, learn about the importance of BI for your company’s growth.

 

Would you go to an unknown place without directions?

 

Have you ever considered going to some new place without navigation or any directions? That sounds very adventurous but not very wise. So, will you try to lead your business without a clear set path?

 

Business Intelligence is like navigation

 

To efficiently navigate your online business, you need timely and accurate information, which is a base for the decision-making process. Doesn’t matter if it’s a stationery store or eCommerce company – comprehensive information decides if you’ll win or lose with the competition.

 

Defining Business Intelligence

 

To properly define Business Intelligence, often referred to as BI, you can imagine it as the brain of operation added into the software. It’s a method using multiple tools to improve the process of collecting and analyzing present and integrated data to support actionable insights for business growth.

 

Why E-Commerce businesses are adopting Business Intelligence

 

With access to advanced and, above all, automated business analytics, retailers can make critical decisions much faster, which can affect the value of sales in the online store.

 

To back up this statement, Forbes conducted a study showing that last year, 54% of enterprises felt that cloud BI was essential to their current and future businesses. One-third of large organizations are expected to implement decision intelligence by 2023.

 

Advantages of BI in eCommerce

 

Decisions based on facts and statistics – Business Intelligence used in eCommerce allows you to make strategic decisions based on statistics. These decisions can determine a company’s direction, growth, and purpose.

 

Discovery of sales trends  –  Using BI, eCommerce companies can easily discover sales trends among their users by analyzing online customer behavior (reactions to promotions, buying patterns, online experiences), which will ultimately translate into increased revenue.

 

Issues control – Business Intelligence was made to analyze all kinds of data, even the bad ones. In eCommerce companies, this helps determine where the error or quality issue is and make improvements. These problems include lower sales productivity, customer churn caused by poor call center service, or misanalyzed market and competition. This data can then be processed by various modules to assess where errors and quality issues are occurring along with information on how to fix and prevent them in the future.

 

360-degree customer view – BI helps you understand your customer’s needs and behaviors and analyze that data to get a 360-degree view of their actions. This helps you retain valuable customers and seize missed sales opportunities.

 

Managing stock and inventory – Business Intelligence provides valuable data predicting overstock and out-of-stock situations through full inventory analysis using dedicated replenishment, sales, and forecasting data.

 

Analyzing data from multiple sources – thanks to Business Intelligence services it is possible to evaluate data from many sources (e.g. marketing automation systems, Google Analytics, informatic systems) and to present them in the form of comprehensive reports. This allows, among others, analyzing:

 

effectiveness of marketing activities,
buying trends,
the popularity of specific products,
changing product prices,
sales volume.

 

How do BI tools increase sales in online stores?

 

With access to advanced and automated business analytics, it is possible to accelerate decision-making that directly impacts sales.

 

By knowing what products sell best, with BI, companies can build stock, maintain continuity of offerings, and ultimately fulfill more orders at the same time. Analysis of marketing efforts shows which ones will yield the highest ROI and which ones will not. Business intelligence tools can create actionable data reports, and through the use of AI technology, analyze that data, leading to beneficial decisions for online businesses.

 

Conclusions

 

Today’s world is overflowing with data, without which running a business would be impossible. Yet, the key factor is not to collect all the data in the world, but to understand and use it. With the help of Business Intelligence, any eCommerce company can grow quickly by entering a new market or identifying and converting potential customers.