Category Archive : Web Design

Website typography basics for online businesses

First things first: What is website typography? I know the word “typography” sounds fancy, like only famous designers or college art professors would ever really know what it means, but you can understand it, too, I promise. Wikipedia defines typography as “…the art and technique of arranging type to make written language legible, readable, and appealing when displayed.” If I boil that down even further and more simply, website typography is just text on a web page, arranged nicely.

It’s the ability to arrange it nicely which is intimidating to most people, but if you follow a few basic website typography rules, you can do it and you don’t even need to be an artist.

6 website typography terms to help you master web design

We’ll start by understanding some different typography terms. Then we can get into how to use them to create a well-designed page or document for your online business.

  1. Typeface vs font.

  2. Leading.

  3. Tracking.

  4. Kinds of fonts.

  5. Readability and balance.

  6. Consistency.

Now that you’re familiar with the main points of website typography, read on to gain a better understanding.

Editor’s note: Looking for expert web design help? The pros at GoDaddy can build you a mobile-friendly, beautiful site that reflects your industry while following your lead and input. Call for a free consultation.

1. Typeface vs. Font

The words typeface and font are used interchangeably these days, but there’s actually a difference, technically. For example, “Arial” is a typeface. “Arial Bold” is a font.

Fonts describe the style of typeface that you use.

 

This terminology all got muddied with the rise of modern day computers, but for you as a new business wanting to learn about typography, it doesn’t really matter. Call it what you want! Just make it look nice and readable. I’ll be using the word “font” in this article, but you can tell by context when I actually mean typeface.

If you want to dig deeper, read this Fast Company blog post: What’s The Difference Between A Font And A Typeface?.

Website Typography Typeface
Pinterest | Original Article

2. Leading

“Leading” (pronounced “ledding”) and also called “line tracking” is another term which is best described by its historical origins. When typesetters would lay out the type by hand on their printing presses, they used strips of lead at different thicknesses to set the space between lines of type. This added vertical space and made it easier to read.

How to use leading

You want to keep the space between lines of type at a reasonable distance. I suggest you start by making the leading number be the same as the font size. So if your font is 30, make leading 30, and then increase that if needed to ensure that the bottom of your letters on the top row aren’t bumping into the tops of your letters on the bottom row.

3. Tracking

“Tracking” or “letter-spacing” refers to the spaces between letters. If the letters are close to one another, that’s “tight” tracking. If they are spaced out, it’s “loose.” Sometimes tracking can result in some unintentionally disastrous, or hilarious, results when one letter pushes too close to another letter and looks like they’ve morphed into an entirely new one and changed the whole word. Just do a search for funny letter spacing fails and have yourself a laugh!

How to use tracking

The main goal here is to look at your tracking and make sure the text is readable. It can’t be too close together, or too far apart. Get a second opinion if you’re not sure. But generally, the default settings for tracking on a font are safe to use without modification.

Related: Quiz — Are you making these 15 website design mistakes?

4. Kinds of fonts

Fonts are the main element for adding typographic personality to your website. There are four main kinds of fonts that you’ll encounter and some anatomy that helps you differentiate between them.

It’s good to have a general understanding of how these work together and where they’re used most often.

So I’ll make some recommendations for you to follow as you dig into this whole website typography thing. But keep in mind that these aren’t unshakeable rules. You can experiment and you can veer from most of these tips.

If you want to see some beautiful examples of the anatomy of type, check out this Instagram feed by Claire and Elise, a SoFontsy designer. She puts out new type anatomy posts every Tuesday in her IG account.

Website Typography Claireandelise
Photo: Claireandelise on Instagram

Two important rules for font usage

Before we get into the four types of fonts I want to make sure you understand two important rules:

  1. Don’t use too many fonts in your design. One or two usually are plenty. Or pick a single typeface and use the various font styles included, to break up the hierarchy of your design.
  2. Be careful with ALL CAPS. Sometimes it feels like you’re shouting when you don’t mean to. And sometimes it’s hard to read — like with script fonts (I dig into this more below.) So just make sure that if you decide to use all caps, you’ve thought it through and it is readable and balanced.

Related: eCommerce website design tips for do-it-yourselfers

Four main types of fonts

When it comes to fonts, there are four main types. Read on to learn when and how to use them.

1. Serif fonts

Website Typography Times

Serif fonts have a little “foot” on the ends of the letterforms. If you’ve ever seen a computer in your life, and I know you have as you are here right now, then you’ve seen Times — a serif font.

Serif usage:

Use serif fonts for the body portions of larger documents, paragraphs on a page, and printed things. Most people are accustomed to seeing paragraphs with serif fonts in traditional settings such as in printed books, so will find them comfortable and easy to read.

Serif fonts also work well as headlines.

 

Addington CF is a lovely serif font from Creative Market.

Website Typography Addington
Photo: Creative Market

2. Sans serif fonts

“Sans” means “without.” So these are fonts that don’t have serifs. They are “without” serifs. Arial is a classic example of a sans serif font.

Sans serif usage:

These can also be used for body copy. We generally see them used in more modern settings, such as on-screen on a website, or in documents discussing modern subjects. Sans serif fonts also work well as headlines.

Quick is an elegant sans serif option from Creative Market.

Website Typography Quick
Photo: Creative Market

3. Script fonts

Website Typography Madina
Photo: Madina

This style of font has had a huge resurgence in popularity over the last 10 years or so. I believe this is due to the rise of sites like The Hungry Jpeg, where independent designers supply affordable fonts for sale. Plus, there has been a growing trend of hand-lettered design in commerce both online and offline. You’ve no doubt seen all sorts of fanciful script fonts on mugs for sale at your local Starbucks. Or on nearly every Pinterest pin in the world, it seems!

And sites like Canva, make designing so easy, that pretty much anyone with internet access can have beautiful typographic layouts in minutes with pretty scripts included.

Script usage:

My biggest tip for using script fonts is to never use them in all caps. I’ll say it again, it’s so important … NEVER USE SCRIPT FONTS IN ALL CAPS. LOL!

It’s a disaster of completely unreadable sentences.

 

Scripts were not designed to look good with repeated capital letters. Their true beauty comes from how each letter combines with the next in a mix of capital and lowercase, and beautiful swashes. Scripts work well for short headlines. Or for a single word in a headline where the other words are sans serif or serif.

Farmhouse is a beautiful calligraphy style script font option from Creative Market.

Website Typography Farmhouse
Photo: Creative Market

4. Slab fonts

Website Typography Alpha Slab
Photo: Alpha Slab

Slabs are fonts that are very thick and heavy. They’re fantastic as large headlines with strong messages. They’re bold and can sometimes seem to be shouting at the user. So they are not appropriate for designs where you want to speak softly or gently to your customer.

Slab usage:

These are best used for larger fonts sizes, not the itty bitty ones. And they pair really well with a serif or sans serif font. I don’t normally recommend them alongside script fonts because they are kind of “showy” and that’s the purpose of script fonts, too. It’s all about balance between plain/quiet, and bold/loud.

Slab Lungo is a unique vintage slab font option from Creative Market.

Website Typography Slab Lungo
Photo: Creative Market

Readability and balance

The purpose of this information is to get you closer to beautiful, readable copy. I’ll sum up the guidelines in a handy short-list:

Readability tips

  1. Balance the fancy (slabs and scripts) with the plain (serifs and sans serifs).
  2. Minimize how many different kinds of typefaces you use (one-two).
  3. Use even spacing between letters (no embarrassing leading mistakes).
  4. Ensure spacing between lines is balanced (no lead strips required!)

You’ll also want to make sure you take a step back and look at your design with fresh eyes.

Sometimes this means you need take a few steps back from your computer, or print it out and see it on paper, or even look at your design in a mirror. Yes, I really do that! It’s amazing what you discover when you view your page backwards.

Take a fresh look and ask yourself:

  • Are there any huge gaps?
  • Is the text too crowded?
  • Are margins around the edges too small or too big?
  • Is there too much copy?
  • Is there too little copy?

It takes practice, but you can do it! Double-check with a friend, or come back to your design a day later.

Consistency

Once you get a feel for what fonts you enjoy using in your brand, use them every time. Be consistent. It makes your business look more professional, and it’s way easier on you to create a balanced page because you’re used to working with those particular typefaces for all your projects. You’ll be a master of website typography in no time!

The post Website typography basics for online businesses appeared first on Garage.

10 New Year’s resolutions for nonprofit webmasters

The new year is around the corner, and that means it’s time to do a retrospective on all the strategies and habits you’ve developed over the past year — and use that information to establish new resolutions for the year to come. Nonprofit webmasters have to juggle many different goals, from improving brand visibility to maintaining uptime to securing more donations. So it’s hard to zero in on one tactic or improvement that could make you universally more effective.

10 New Year’s best practices for nonprofit webmasters

As we close the door on 2018 and look to 2019, there are some solid resolutions you can adopt to improve your performance overall.

  1. Update your site more frequently.

  2. Get more visitors’ perspectives.

  3. Experiment to get more donations.

  4. Prune your old or low-performing content.

  5. Reorganize to adhere to the “three clicks” rule.

  6. Use more visual storytelling.

  7. Optimize your mobile experience.

  8. Offer more opportunities for engagement with the brand.

  9. Stop assuming things are working.

  10. Get involved in the conversation.

Start the new year off right with these 10 tips for nonprofit webmasters.

1. Update your site more frequently

No matter what your goals are, it’s a good idea to keep your website updated as often as possible. In some cases, that means publishing more blog posts. In others, it means keeping your visitors informed with the latest news. In still others, it means making new announcements and posting new media, like photos or video.

Updates give people a reason to keep coming back, and they serve as a good excuse to reevaluate your site and find opportunities for improvement.

The only caveat is to only update your site with quality content. It won’t matter how much you update if nobody wants to read what you’re writing.

Related: How to write a great blog post

Editor’s note: Looking for a bigger website overhaul? See what our experts can do for you with GoDaddy’s Website Design Service.

2. Get more visitors’ perspectives

Professionals in the nonprofit industry are often too close to the organization. They see problems in terms of their own experiences, rather through the eyes of a visitor. Through that lens, your latest press release or site redesign might look extraordinary. But to the average visitor, it might seem pretentious or detached. This year, spend more time getting the perspectives of real visitors, whether you conduct more user surveys and demographic research, or use tracking software to learn how your users interact with your site.

Related: Customer driven marketing: Why your customers should become your new family

3. Experiment to get more donations

I’ll go out on a limb and assume that you want to see a higher conversion rate (i.e., more donations). Unfortunately, those donations aren’t going to come to you on their own. Instead, you’ll need to resolve to conduct more experiments to see which factors increase or decrease the likelihood of conversion.

A/B testing is the best practical framework for this, but there’s no limit to how many factors you can evaluate. For example, you can adjust your design, your headlines, your offers and even the positioning of your call-to-action, and probably see different results.

Related: The what, why and how of WordPress A/B testing

4. Prune your old or low-performing content

Nonprofit Webmasters Pruning

Most nonprofit webmasters become fixated on constantly adding new content and new information, but you also need to make sure all of your content is high quality.

This year, consider resolving to reduce the total volume of your website.

 

Sort through your old blog posts and content pages, and either delete or update anything that’s obsolete. This will help you maximize the average quality of your site’s content.

Related: How to perform an annual SEO audit

5. Reorganize to adhere to the “three clicks” rule

The “three clicks” rule is an informal web design rule stating that every page of your site should be no more than three clicks away from any other page. Chances are, your core navigation is already set up this way. Pages like “Donate” and “Contact” are already a click or two away from the home page. But what about your blog posts and other in-depth internal pages?

Take the time to audit your sitemap, and spend more time throughout the year ensuring that your new pages are well-connected.

Related: Checklist: Audit your agency/web services website

6. Use more visual storytelling

Visual content marketing has quickly grown to dominate the content world, and it’s only going to get more important from here.

This year, resolve to invest more resources in your visual storytelling, especially when it comes to illustrating your organization’s impact on the community.

Video interviews and documented improvements can be powerful, but even photos of the people you’ve helped can make a substantial difference.

Related: How to use digital content marketing to grow awareness, trust and sales

7. Optimize your mobile experience

Your site likely already passes Google’s Mobile Friendly test, but this test isn’t designed to measure how effective or captivating your site is. It’s meant to serve as a pass/fail test for the bare minimum standards of mobile optimization. This year, instead of shooting for the minimum, strive to improve upon the basic formula. Spend more time tweaking your UI (user interface) to cater specifically to mobile users. They’re going to represent a bigger and bigger portion of your audience in the years to come.

Related: Should your nonprofit start mobile fundraising in 2018

Nonprofit Webmasters Mobile

8. Offer more opportunities for engagement with your brand

What can the average visitor do to engage with your brand directly? You might have a contact form available, but email isn’t always the best medium, and it creates more distance between your organization and its average patron. Instead, try to provide more contact points throughout your site, such as an instant chat feature, or more opportunities for social interaction. Brand engagement is almost always a good thing.

Related: Best practices for online customer service

9. Stop assuming things are working

Many nonprofit webmasters make the mistake of assuming things with their site are working until proven otherwise. This year, resolve to do the opposite.

Assume things aren’t working until you make them better.

 

The big problem with assuming the best is complacency. For example, you might have a call-to-action that yields a 1-percent conversion rate. Many webmasters would be content with that. But if you start with the assumption that you can do better, you’ll be inspired to make changes that could potentially improve that success rate.

Related: 8 costly call-to-action mistakes you’re making on your website

10. Get involved in the conversation

It’s not enough to passively sit back and hope that you have a decent understanding of your visitors. If you want to learn more about your audience and improve your reputation at the same time, resolve to get involved in the conversation on a more frequent basis. That means staying active in comment threads on your blog, and reaching out to your visitors and patrons where you know they converse regularly.
Wrapping up

Don’t let these 10 resolutions fall by the wayside (the way almost 91 percent of New Year’s resolutions do). Instead, take action on them and keep working on them consistently throughout the year.

After all, it’s easier to change your thinking through action than it is to change your actions with thinking.

The more consistent you are — and the more committed you are to this approach — the better results you’ll inevitably see.

The post 10 New Year’s resolutions for nonprofit webmasters appeared first on Garage.

Harness the power of a Digital Experience Platform (DXP)

There are (of course) always going to be fads and trends that influence marketing and sales strategies, but more important are the long-term shifts. With this in mind, personalizing interactions via a digital experience platform (DXP) is going to dominate over the next 18 months.

While we’ll talk more about this throughout the rest of the article, this means the customer will engage with businesses and other brands across social media and beyond. The scope is enormous and much more immersive than current technology allows for.

This piece will further look into the concept of a DXP and talk about how you can begin to harness it for your own benefits. Let’s take a look!

Related: How to create a small business sales plan that’s bound to be successful

The current state of online marketing

Before we delve into where the whole customer experience is going, let’s take a look at what they have to deal with right now. In a very broad sense, you’ll have several entry points of your sales funnel. Common examples of these include sponsored ads, social media posts or your website itself.

Of course, each of these is designed to appeal to a large target user base, with the understanding that many will simply spill out of the funnel. The constant churn of marketing is based in part on recapturing these lost prospects.

For example, you’ll possibly implement a retargeting or remarketing campaign to try and reignite the interest of lost customers. In essence, your marketing is powered by new customers discovering you, as well as previous customers rediscovering your services.

As you can guess, this approach is quite wasteful and inefficient, hence the need for the entire marketing machine. However, the DXP is a new approach on the horizon that looks to promise less waste, more conversions and, more importantly, no escape from your marketing.

Related: Remarketing strategies that get local customers to come back again and again

Where customer experience is headed

In the last section, we didn’t talk about the rise of mobile browsing — more specifically non-desktop internet usage. The numbers show that mobile surfing has a larger traffic share than desktop browsing. This is interesting because the question becomes: are the traditional methods of marketing outdated, or at least unoptimized?

The concept of a DXP could provide the answer. This is a way of immersing the potential customer in your branding and marketing, with the hope that they convert. This sounds similar to current strategies, but a DXP has a few key differences:

  • A DXP is almost platform and device agnostic.
  • Marketing is highly-tailored to individual targets.
  • It’s arguably more immersive than traditional marketing methods.

DXP Watching

Let’s touch on these a little more. A DXP is designed to essentially follow the user around. In other words, the experience is meant to be similar, regardless of the user’s device.

What’s more, in the current climate ads have a more general focus. This isn’t to say they aren’t targeted, but there’s an inherent weakness in that they have to appeal to a large user base.

However, a DXP enables you to tailor ads to individual users, per each specific device. This opens up a world of highly-targeted, laser-focused ads that will be more immersive and provide a greater conversion rate over time.

It’s fair to say this could be drastic compared to currently accepted standards.

In fact, this concept is so new that it may actually end up being a transition to the true answer in the long-term future. However, at this point, the focus is on defining and developing the DXP as the endpoint, so to speak.

Related: What’s the difference between Amazon advertising and paid ads on Google and Facebook?

How to begin adapting your marketing strategy

DXP Cogs

It’s very tough to begin suggesting a plan of attack when a concept is so new. However, there are things you can do today to help the transition to a DXP in the future. Firstly, make sure the base elements are in place. Some examples of these include:

  • Social media accounts, on platforms relevant to your target audience.
  • A website that acts as a proactive lead generator, rather than a passive “virtual business card.”
  • An ad strategy you’re willing to evolve and adapt, that has a measure of success.

Editor’s note: GoDaddy offers a digital toolbox that can help you build a branded, integrated online presence — plus expert services including web design and social media management.

The last item in this list is arguably the least necessary on paper, although we see plenty of benefits. For example, if you can use your current success as a marker, this can help you analyze your DXP’s growth accordingly. What’s more, if there are specific user types you’re associating with good numbers, they will be a good target for your DXP.

Of course, you could be hesitant to tweak an already-successful marketing strategy. In these situations, it may be more beneficial to target a different set of users.

For instance, you could continue with an ad campaign as you usually would, but siphon off a segment of unconverted prospects to see how your DXP performs. This lets you reap the benefits of your current campaign while taking fewer risks when testing your DXP.

Closing thoughts on the DXP

With the web ultimately being a tech-based field, you’ll often find rapid innovation is at the forefront. When it comes to marketing, the DXP is one such innovation that looks like it might just be the future.

We’ll soon be able to engage and target potential customers regardless of the device they’re using, on a cross-platform basis. What’s more, ads can be tailored almost on a macro level, meaning the only barrier to conversions is the strength of your marketing materials.

The post Harness the power of a Digital Experience Platform (DXP) appeared first on Garage.