Is Ghost Referral Spam Haunting Your Analytics (And Confusing Your Clients)?

Many webmasters and SEOs are currently working through a new online spam game that’s affecting Google Analytics data. Since late last year many web marketers started to notice anomalies in Google Analytics data. The problem became obvious when there was large increase in referral traffic across many Google Analytics accounts. However, this new spike in traffic also skewed data in other metrics such as the time spent on websites and bounce rates.

Referral Spike on April 2o

Referral Traffic Spike on April 20, 2015

When we dug deeper we were able to see that the spikes in referral traffic weren’t from legitimate sources, but instead, from what is now called “Ghost” referral traffic or ghost referral spam.

These types of spam referrals are affecting almost everyone that uses Google Analytics to monitor website traffic and statistics, and is becoming an increasingly common problem.

What is Ghost Referral Traffic?

“Ghost” referrals or referral spam is exactly what it sounds like. This traffic shows up in Google Analytics as a referral visitor from a website. However, when you look closer you notice that the hit isn’t from a real visitor, but simply a digital mark left in Google Analytics by these domains.

What Ghost referrals look like in real life, probably.

What Ghost referrals look like in real life, probably.

As of right now there are two main types of spam affecting Google Analytics data. The first type are spam bots or crawlers. These bots crawl each page of your site, often ignoring your robots.txt. The most common bot known is “Semalt”, however there are others. Many identified and tackled this issue late last year by blocking these crawlers from accessing websites in the first place. You can read more about blocking this type of spam bot with .htaccess at StackOverflow.

The issue that has currently presented itself are simply spam referrals from various domains. Most of these domain names have adult themes, and for us began hitting our sites around April 20th, 2015. Research by other search marketers has shown that everyone with a tracking code “UA-XXXXXXX-1” has been affected, if not more.

The difference in spam bots and these new spam referrals is that the “traffic” from the new domains never actually hit your website, instead just leave a digital trail affecting only Google Analytics data, by using your Google Analytics tracking code to do so. Therefore you can’t use the .htaccess method to block this type of traffic, but instead must create filters in Google Analytics to stop the referrals from ruining your data.

Will Ghost Referral Traffic Affect my Website or SEO?

Absolutely not. This problem is exclusive to Google Analytics data. I mentioned before, these current spam referrals don’t even hit your site – just show up in your top referrers in Analytics.

What is affected, however, is reporting and data. These spam referrals hit all in one day, showing upwards of 650 hits in a day in some cases. They bring with them a 100% bounce rate and a 0 ‘time on site’ metric.

What does this mean?

  • This greatly increases your overall bounce rate.
  • It decreases the overall time on your website.
  • It falsely increases visitors to your website.

  • It skews referral data, making it difficult to see what referral avenues are actually working.
  • It also hinders our Goal Conversion and location data, as most of this traffic is from Russia.



You can see here that this client had a moderate amount of good referral traffic, with a bounce rate of 45.90% and an average “session duration” of 3 minutes and 40 seconds.



After the referral “attack” we now have a bounce rate of 91.54% and an average session duration of a measly 51 seconds. All of the domains shown in this data are spam referrals, all coming from April 20th.

 Location data, After

Prior to the Analytics attack this client's traffic was 95.4% US/Local - This is how the location data looks for this month.

Prior to the Analytics attack this client’s traffic was predominantly US/Local – This is how the location data looks for this month.

Why are sites targeting Google Analytics data, what’s the point of spamming in this way?

The most common conclusion by many search marketing professionals is that these sites are cleverly using a black-hat affiliate marketing technique to drive traffic back to their sites.

They present themselves in data, and webmasters and SEOs will check out the site to ensure that there is no actual backlink on these spammy websites. The investigation shows up as direct traffic and time on site for these domains, especially when marketers visit multiple pages to ensure that there is no backlink to their website. Now these sites have a steady base of “traffic” to show prospective advertising clients. DO NOT CLICK THE LINKS as advised in this article.

dont click spam links


How do you stop Ghost referral spam in Google Analytics?

There are a few techniques to block this type of traffic from hindering Google Analytics data. As I mentioned before, many were able to block spam bots earlier this year by implementing a block in .htaccess to stop these crawlers from accessing websites.

filter view google analytics

Applying filters in Google Analytics

However with the newest type of “Ghost” spam, we must manually filter each domain out of analytics. At this time Google hasn’t addressed this particular issue. The only problem with implementing filters is that Google Analytics does not allow us to apply them retroactively. Therefore this spam traffic will continue to show in past metrics and data unless you apply views with advanced segments.

Many web marketers are diligently working to block these traffic sources. Here are some great resources for the various methods of blocking “Ghost” referral traffic from your Google Analytics account, as well as a list of domains that are currently affecting our client’s traffic.

We will continue to update our list of domains found, as well as provide more information in this post as we learn more about spam referrals and how to address them.

A great guide for blocking crawlers via .htaccess…

How to Block Spam Crawlers from Ruining Your Google Analytics Data – by

More about filtering current referral spam from your Analytics data…

Removing Referral Spam from Google Analytics – by

Known Spam Referral Domains



















Pretty classy list. And you have been warned…don’t click the links for “reasearch”.

Mobile Subdomain vs Responsive Web Design and SEO

Updated May 1st, 2015: Is your site mobile ready? Google’s latest algorithm update rolled out on April 21st targeting business whose websites we’re not mobile friendly. If you haven’t updated your site, you could be losing tons of traffic from mobile search. You can read more about Google’s update here. If you’re not sure if your site is mobile-friendly you can use Google’s handy Mobile-Friendly Test. If you need help getting your site updated and mobile ready let us know, we can help!

One of my many pet peeves as a developer, has to do with the separation of look and feel after viewing a website on both desktop and mobile. After a few dozen visits to a site on a desktop, I have clear idea about what to expect in regards to a site’s look and functionality. Then one day I’m waiting at the dentist, so I decide to check out the website on my phone. The browser loads and to my surprise the site looks completely different than I expected. On the phone I expected it to look relatively similar to the desktop version, so why is it so different?

Why Does the Mobile Site Look So Different?

This is because there’s a 99.9% chance that it really IS a different site. The site is usually located “ (though it can be anything, such as “” or “”) instead of “” and you can see it’s address in the that though websites employing Responsive Web Design can in theory have a completely different aesthetic than the desktop site, and it’s not a requirement that the “m” site look completely different than “www.” However, RWD (responsive web design) sites typically don’t show a large change of aesthetic between screen sizes. It’s just more common with “m” subdomains because they are truly different websites.

What’s So Good About Responsive Web Design?

So when would a company want to use a “m” subdomain? First let’s talk about why you want a RWD website. RWD simply means that you develop websites to display nicely on all devices regardless of screen size. This allows for a continuity between devices, while maintaining consistency between link navigation and style. For us here at ISM, SEO is the most important criteria we consider in making decisions, and responsive web design and SEO seem to go hand in hand. Google also prefers RWD over a “m” web design because it generally provides a more coherent user experience and helps avoid duplicate content issues because of search engines having to crawl 2 different codebases. Google prefers that a site share a single domain and html, and even recommends it to be a web standard. Consistency of look has indirect benefits as well, such as keeping users on your site longer and making it more likely for them to take action, and makes generally makes it easier to share content because of one dedicated link.

Why Would I Want a “m” Subdomain?

So why is this not the case 100% of the time? Why go through the trouble of building a brand new website just for mobile users? Well, the arguments for a “m” site seem to revolve around speed.  It’s true that a website with tailor fit Javascript, CSS, and images, can result in a website that’s fast and streamlined because nothing but what’s essential has been introduced. Another argument is that if you run an old website, especially if it has a large legacy codebase, it can be difficult and expensive to rebuild the code just so it works on mobile devices.

So What Should I Do?

I believe the problem however, can be solved in a trade-off for most websites. Though the argument of legacy code is a tough problem to tackle, requiring more than just development decisions, there are good solutions to help increase mobile speed. Unless you have to develop specifically for older browsers,the push toward a more coherent user experience and a consolidation of resources is obviously a better solution. And again, SEO is an argument that sometimes gets left out among us developer types, but it all goes back to the idea that if no one can find your website, what does it matter?

Do You Even Lift? Executing A Content Marketing Strategy That Gets Results

Content Marketing StrategyWhat do getting swole and content marketing have in common?

More that you might think.  By applying some of the same principles that work in the gym to your content development and marketing you can get the results you are looking for.

So do you even lift?

Content Marketing Strategy | Start TodayThe first step to getting results is to take action. Do something.  Start somewhere.  You have a boring niche? So… you still have build content. Your industry is too technical? Doesn’t matter… you still have to do it. You don’t like social media… you still have to do it.

If you want the results, you have to put in the work, and the work isn’t easy. Sometimes it feels like a grind to continuously promote content in various verticals, but to be a thought leader or subject matter expert, you have to put in the effort. KISSmetrics has awesome content about maximizing engagement by leveraging available data about the timing of distribution. This post is a great example.

So, how can you get results from your content marketing?

Have a plan before you show up

Wandering around the gym doing a little of this and a little of that isn’t going to work – you need a plan.

Have goals for your content marketing. Knowing why you are developing a particular piece of content keeps the creation process controlled. Content serves various functions – is it sales copy? Educational copy? Industry specific? Linkbait? All these content types require different approaches to get maximum results.  Will Reynolds from SEER has some incredible data on putting a content plan together here.

Don’t skip leg day

Leg day sucks, but it’s important.  You can’t skip the tough parts and expect to meet your goals.

Getting results from your content marketing requires that you have a plan for your content and that you stick to the plan. Know what, when, and where you are going to promote your content before you build it. Put a timeline or schedule in place to maximize your engagement across social media networks. Preparing a distribution schedule, drafting tweets, and selecting pictures and hashtags in advance makes executing easier, and it gives your content marketing efforts a more coherent feel.

No curls in the squat rack

The squat rack is for squats – knowing where to post your content makes you more efficient, and less likely to get the stink eye.

Stop Publishing Low Value ContentKnow where your content belongs and put it there. Cluttering up Facebook with every idea that pops into your head isn’t a content marketing strategy. Evaluate your content and understand what outlets are most applicable for your particular content goals. Does it belong on LinkedIn or Pinterest? Putting your content in front of the most likely audience, respects your audience’s time – and people love that.

You can’t out train a bad diet

You can do crunches until you pass out but if you eat cake for breakfast you won’t realize your goals

Stop with the crappy, low value, content. It’s poison. It’s annoying. It’s not going to help you.

Having a disciplined approach to content creation ensures that you only turn out targeted content. Come up with a lot of ideas, cull the bad ones, flesh out the good ones to see if they will work, and develop only the ones that are new, useful, and feasible.

You gotta track your gains

Knowing your numbers is key to tracking results – if you aren’t keeping track, how do know where to adjust?

Once your content has been developed, refined, scheduled and finally released into the wild, you have to track it.  Your strategy has many assumptions, and paying attention to the life cycle of a piece of content gets you actionable insights for modifying and informing your next piece of content.

So that’s it:

  • Get started
  • Make a complete plan
  • Stick to the plan
  • Be smart with your efforts
  • Track your efficacy

Now that you have your content marketing tips if you want to “learn” more about the gym please check out one of my favorite YouTube channels to see the inspiration for this post.


Can HTML5 Help With Your SEO?

HTML5 has been a growing standard for about 2 years. Although the “5” denotes that this is the fifth official version of HTML, the plan seems to be that it will be an ongoing project, with new features being continually added, and none being taken away. This will tremendously help with any new version headaches in the future. I will cover some easy changes that you can (and should) start implementing right now if you haven’t already, and help increase your SEO.

HTML5 Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

This is the old school, long and complicated way of describing a web page to a web browser. Now we just easily use this instead:

<!DOCTYPE html>

HTML5 File Specification

Instead of having to specify whether our link type is text/css or text/javascript, such as:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

We can simply use:

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

HTML5 Semantic Header/Nav/Footer

Google has filed for a patent to make an adjustment to it’s PR algorithm. The change states that the search engine (SE) can adjust the relative importance of a link on any given page. Here is where these new semantic markup tags become invaluable. Before HTML5, we had to build websites using spans and divs. Since these tags don’t necessarily help SE’s fully understand what a block of code is trying to accomplish on a webpage, we can now add a bit of context:

    Header content goes here
    Navigation menu goes here
   Footer content goes here

Links in the header and navigation get a little more of a boost compared to those in the footer. Divs and spans are still in use today of course, but their utility has been slowly diminishing as newer tags continue to be developed.

HTML5 Links

Links also get a bit of an update to help make their targets a little better understood. One of the most popular links is the rel=”author” attributes:

<link rel=”author” href=”″>

This bit of code is supposed to make author’s face show up next to the result description on the page (or author’s pizza, in this case).

HTML5 Forms

Ok, this last one is a little more complex, but super cool as it saves a lot of trouble behind the scenes. This bit of code validates the input field, and makes sure that the email address entered is a real email address:

<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>

For more information on HTML5 and ways you can improve the SEO and indexability of your website, check out these resources:–net-13520

JPEG or PNG? – Increasing Page Speed with Proper Image Formatting

Google looks at how quickly your page loads when its bots are crawling your site. Images and graphics often affect the load speed more than anything else, but learning how to save image files properly can reduce the unnecessary bloating of image-sizes.

There is no reason to blindly throw images into your website without the proper formatting.

Even if you aren’t interested in optimizing your website for search engines, you should do it for the users. No one wants to wait for a website to load. If you reduce your image sizes your visitors will thank you.

PNG Files

Portable Network Graphics is a lossless file format created with the intent to replace the GIF format, due to the patent restrictions of GIF compression. The project was a success and we now have complete access to the format, which is patent-free, has great compression, and is widely supported by web browsers. PNG files are used primarily for transparent images, simple-color images, and images that have hard lines, like text. There are two versions of PNG files: 8-bit PNG(known as PNG-8) and 24-bit PNG(known as PNG-24). PNG-8 is limited to 256 indexed colors, while PNG-24 has millions.

JPEG Files

Joint Photographic Experts Group created a file format, creatively named JPEG \ˈjā-ˌpeg\, to handle complex-color photographic images. When saving a file as a JPEG, users have the choice of quality vs. compression. More compression results in a smaller file size, but you will lose quality. Obviously, less compression results in a larger file-size, but also a higher-quality image. The great thing about JPEG compression is that you can usually find a balance that both looks good and has a small file size. Unfortunately, JPEG files have no transparency. Additionally, the file format is lossy, meaning that it loses some of it’s data each time it is compressed. If you re-save the same image multiple times for some reason, the image quality may be low.

Still need some clarification? Let me clear it up for you.

The file sizes mentioned are for the image in the bottom right of each example.


This simple-color file is saved as a PNG-8. It has a file size of 1.81KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Low Quality JPEG | PNG vs JPEG

The JPEG file can be compressed to about the same size as the PNG, but the quality is terrible.

Does that mean PNG is always better than JPEG? No, there is a reason they didn’t name it the “.PERFECT” format.

While we wait for the best format ever to be created, here is an example of when JPEG can be a better choice:



Can you tell a difference between the two sides of the image? I doubt it. The full-size PNG has a file size of 402KB, but the full-sized, compressed JPEG is only 35.7KB.

JPEG works better for this image, because JPEG compression was made for photographic images. The compression still works for simple-color images, but the loss of quality is far more noticeable.

Why Flat Design Works So Well

Have you ever visited a website that makes you leave as soon as you see it? We all have. The scary thing is that your website could be one of them. Many people, especially the newest generation of consumers, are starting to dislike the look and functionality of well-built websites from just a couple years ago. Why? Because there is too much “going on”, making the browsing experience too difficult.

If your website looks dated, then it probably has more issues than just appearance; it probably hasn’t been optimized for mobile devices, for example. Considering that mobile devices make up roughly 30% of web traffic in the U.S., it is generally considered a good idea to make sure your website is accessible to those users. If your website is too difficult for them to use, they will find another. Those people were your potential customers, gone because they didn’t like using your website.

Mobile versions of websites have solved the issue for many people, but they’ve almost worked too well. Websites created for mobile devices are convenient to use, and that is why web viewers are starting to dislike many full-size websites. This has created a new style of web design, called “flat design”.

Google Logo | Flat Logo

Google is a good example of a subtle flat design. Check out their newest logo and website.

This trending style isn’t only a result of personal preferences, though. There are reasons it is so popular this year.

Flat Design is the result of logical choices

Flat websites are easier to use.

Content is blocked out in easily understandable sections. Gradients, shadows, embossed and beveled buttons, and large amounts of text are all “going out-of-style”. “CLICK HERE” buttons, for example, are being replaced with buttons that the user can tell are clickable by their appearance and placement. Convenience for the user is one of the main focus points of the design.

Simple-color images are smaller

Flat Icons | Increasing load speed

These icons load quickly, while remaining visually appealing and recognizable to the user.

The fewer the colors in an image, the smaller the file-size. Huge, high quality images load reasonably quickly on a high-speed connection, but many people don’t have fast connections. Mobile devices often times don’t have enough “service” to take full advantage of their mobile networks, and the “free high-speed wi-fi” options available to travelers is usually mediocre at best. Flat design combined with well-written Sass CSS, could help your website load significantly faster, which increases your favor with Google’s ranking algorithm.

Navigation is difficult on phone and tablets.

Devices that use a touch screen instead of a mouse don’t have the ability to hover, which many websites utilize in their menus. This makes it difficult for mobile users to navigate. Flat design solves this issue by avoiding complex navigation and website “depth”, making the website easily navigatable for both mobile and desktop users.

Large blocks of text aren’t useful.

Flat design uses less text than a run-of-the-mill website, because more isn’t always better. Although plentiful textual information looks good to Google’s bots, your viewers aren’t reading most of it. Studies show that readers scan large amounts of text to find what they are looking for in a pattern that resembles an “F”. The first couple headings are scanned over, then the rest of the content in glanced at vertically in an attempt to find something interesting. Knowing this, your website should deliver what your business has to offer before your viewers get bored with reading about it (it happens fast). Your first two headings (remember that “F” pattern) should display your most important information. Flat design gets rid of the  low-value content to make space for high-value content, or give the design some empty space, or breathing room, if there is “too much going on”. That means you shouldn’t have have more than a couple headings for any subject on a main page.

Flat Design | Flat Website | Responsive Design

No compromises here. SpellTower’s website looks and functions the same across all devices.

Flat Design retains your website appearance across devices.

The blocked out and straight-to-the-point content of a flat design can be scaled easily without losing the core of your website’s design. The result is a website that is visually and functionally similar across all devices, making flat design an appealing choice when developing a “responsive” website.

Of course, flat design isn’t the only way to go. There are many styles of web design that also work well, but flat design solves a lot of problems that are difficult to work around otherwise. Not everyone likes the look or functionality of flat design, but you still need to make sure your website is accessible for everyone. If you have a live website already, try clearing your cache and loading it with you have a slow connection, or navigating through the site with a touch-screen.

Sass CSS Can Improve Your Search Engine Rankings

Are you still using straight up old school CSS for your stylesheets? Stop. Right now. Do yourself a favor and take a day to learn about modular CSS, whether it be Sass or Less.

It’s important to keep in mind that we separate style out of the structure for several reasons: to avoid duplication, to make it easier to maintain code, and to have the ability to reuse content with different styles for different purposes. If done correctly, we have smaller file sizes, which leads to faster page loads times, which results in happier users and more favorable search engine rankings. Modular CSS takes this idea and injects it with steroids. Not only does it help keep the website file structure stay as organized and clean as possible, it’s also a super fun to code in.

As mentioned before there are a couple of different languages to accomplish this, however will this article will focus on Sass. While I can’t go very in depth, here are a few general pointers to help you get more bang for your buck.


Nesting is without a doubt one of the easiest ways to build a better stylesheet. This bit of Sass code:

.navigation {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  li { display: inline-block; }
  a {
    padding: 5px;
    text-decoration: none;


.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
.navigation li {
    display: inline-block;
.navigation a {
    padding: 5px;
    text-decoration: none;

Pretty cool huh? Though this bit of code doesn’t do very much, tied together with the following this can save us a ton of typing.


Variables are absolute life savers. One of the easiest way to see their power, is to make a color variable:

$primary-color: yellow; 
.nav {
    border: 1px solid $primary-color;


.nav {
    border: 1px solid yellow;


Mixins are personally one of my favorite parts of Sass. Here’s a simple example:

@mixin opacity($opacity) {
    opacity: $opacity;
.article-heading {
    @include opacity(0.8);


.article-heading {
    opacity: 0.8;



.navigation {
    color: red;
.footer {
    @extends .foo;


.navigation, .footer {
    color: red;

You can see in Sass that .navigation and .footer are separate, but after we process the code, our CSS is nice and clean because .footer is inheriting the color property. This saves us file size as well as time, because we only have to declare the color element once instead of twice.

This is just the tip of the iceberg of the power of Sass. I may write more articles that go more in depth that are specific to Sass if you guys want. Just let me know in the comments. In the meantime here are a few links to learn more about the topic. Stay Sassy Web Diego.


This is the best post about better website testimonials ever. – Dan T.

Is this how your testimonials look?  Odds are that your site employs some version of testimonials like the subject of this post:

So and so is the best and “insert company focus here” and we were super extra ultra pleased with the job so and so did.  We have never been so pleased with another human in our experiences with “insert company focus here”

– RSI (random set of initials)

You may even have some faces to add credibility like these folks or these folks or even these folks:

happy customers - boy do they love you

So the $64,00o question is this:  What are testimonials supposed to accomplish on a website?

The Purpose of Testimonials vs the Reality:

Nobody Believes Your TestimonialsTestimonials are meant to do a couple of things:

  • Help establish trust with prospects that may have no experience with your business
  • Work to articulate your companies value proposition using existing clients as your messenger
  • Humanize your company or product and make your messaging more relate-able

This all makes sense – use prior customer experiences to add value, build trust, and sell more products/services.  But when a testimonial consists of a cheesy stock photo, a blurb clearly not written by a normal customer, and a set of random intials does it really do any of the above things?  I don’t think so…and neither do your prospects.  People don’t tend to declare that experiences were otherworldly when referring to HVAC service or filing bankruptcy.  Generally real people sound like real people…and so should your testimonials.

So my testimonials are awful – now what?

  • Like many recovery programs, the first step is to admit you have a problem.  Once you have come to terms with the fact that your testimonials aren’t helping (and may even be hurting), the next step is to implement change.  To get more mileage out of your testimonials consider implementing some of the following:
  • Use real testimonials – seriously…start asking your clients for REAL testimonials.  If you do a good job for your clients they can probably spare 2 minutes to write a few sentences.  If nobody will write you a testimonial maybe that reality warrants some deeper reflection.
  • Consider using video – this is a lot more to ask of your clients but video certainly brings out the human factor.  Nothing exudes the human factor like a real person saying real words complete with awkward silences and “uh’s” and “umms”.
  • Make top tier reviews easy – create a system to drive clients to your preferred top tier review sites (Google, Yelp, Urbanspoon, etc.) with an email or link on your site that you can send out quickly to those clients that will sing your praises.  Reviews on top tier sites carry weight, can carry over to your Google Places listing, and can be fed into your site using aggregator tools such as the one offered on Yelp!.
  • Develop a story testimonial – this requires more thought and work on your part but can yield big rewards when it comes to establishing trust and credibility.  In addition to a real quote from a real client, provide details of the unique situaiton or need addressed by your company or client.  Was your solution unique?  Did you do something other companies can’t or won’t?  Detail it here – provide supporting info as practical (everyone loves photos).

So get started!  Get rid of the default testimonials and start building confidence and trust with a fresh approach!

Typography That Works With Your Website

When designing a website, there are many components that have to work together to create something that is aesthetically pleasing. High-quality graphics and nice layouts get most of the attention and praise, but there are other factors at work that are equally as important, and shouldn’t be over looked. Typography is one of the elements that is overlooked by most casual internet users until they see something blatantly bad. Typography, in simple terms, is the art of making text appealing to the eye. Although easily overlooked, it actually takes a significant amount of time to get right. Most of the work consists of finding fonts that “look right”. That can be difficult, even if you have artistic talent, but here are some guidelines and tips to help make it easier.

Know When to Use Which Fonts

Unfortunately, we can’t just pick our favorite font and use it for any site. For an attorney’s or law firm’s website, you want to use a font that expresses a sense of formality, professionalism, cleanliness, etc. If someone is looking for a lawyer, they are in a serious mood and want someone who means business; your website has to deliver that sense of security. When it doesn’t, your website turns into a giant sign that says “run away“.

Typography example for Carl's Law Firm

Would you trust Carl with your life? Me neither. Back to Google!

Another example would be the website you have to make for the knitting business your aunt just started. She hand-knits everything herself, so you should use a font with a little decoration, or possibly a “script” font that looks hand-written, for her website. The reason being is — if your products are hand-made, personal, and unique, then your website should reflect some of those elements. The last thing you want to do for this kind of website is use a font that looks industrial, technical, or even too uniform. If the website doesn’t appeal to them, there is a good chance that a new visitor to the website will leave before reading anything you are trying to tell them, even if you stress that everything is hand-knitted in every sentence.  Gap’s website works for Gap because it is a large company that has a large target audience, but it wouldn’t work for your aunt’s knitting website.

Finding one font that works for your website usually isn’t enough, though. Headings and titles should always stand out from the body content, so the reader knows what they are reading. Unfortunately, increasing the weight and size of the header text usually doesn’t make it stand out enough, nor does it look impressive. Instead, in most cases, you should use a different font for the headings, titles, and other important information. Fonts that work well for headings and logos are usually too difficult to read when set as the body text. Generally, a stylish font is good for headings, while a crisp and easy-to-read font is good for body content.

Typography example for a small knitting business.

Pink and blue is normally a bad color combination for fonts, but it could work for a website that is selling knitted clothing. Both are common colors for baby clothing, and they are “fun”– which could relate to the type of consumer you are trying to reach. Otherwise, black or a dark gray is the best choice for font color for light backgrounds. For dark backgrounds, white is a good choice.

Of course, you can’t just pick any two fonts and use them together. They have to compliment each other; modern fonts with modern fonts, traditional fonts with traditional fonts, etc. There are exceptions, where the two fonts have some elements that bring the two together, or have unique qualities that just happen to look good. Be sure to take some time when designing a website, image, presentation, or anything else that has text to find fonts that work well with the other elements of your design– your sharp-eyed readers and viewers will be grateful.

Structured Data for a Smarter Internet

Ever done a search with your favorite search engine and notice that you suddenly have a wealth of information on the results page, and you haven’t even clicked on a link yet! For example if I search for “pizza recipe” in Google, I get this helpful bit of information right here at the top?

google-snippetSuddenly I have a pizza recipe right at my fingertips. The red arrow is showing the cook time (how awesome is that?), the green arrow is providing us with related information, and the blue arrow is of course displaying the author’s info and giving us a chance to read more by them. How does the search engine understand this query? This magic is accomplished by the use of what is called “semantic markup.”

Without getting into too technical of an explanation, basically this is code that’s included inside an HTML document that provides search engines with metadata to extract meaningful information from the resources on your page (images, videos, links, etc). There are a few different markup standards  and some are more compatible with the others than others. While they all are attempting to solve the same problem, namely giving context to web resources, as continues to be developed, much to the chagrin to some in the web community, it may likely grow to have large market acceptance.

There are several different semantic markup standards, but  I’ll briefly describe the most popular and show a piece of each’s markup:

RDFa (Resource Description Framework in Attributes): This was one of the first structured data standards and reached recommendation status in 2008.  RDFa is currently maintained by the W3C and it currently the most widely used.

<body about="">
    <h1>John's Home Page</h1>
    <p>My name is <span property="foaf:nick">John D</span> and I like
      <a href="" rel="foaf:interest"
        xml:lang="de">Einstürzende Neubauten</a>.
      My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite
      book is the inspiring <span about="urn:ISBN:0752820907"><cite
      property="dc:title">Weaving the Web</cite> by
      <span property="dc:creator">Tim Berners-Lee</span></span></span>.
  </body> A standard microdata format that was created between the tech giants, Google, Yahoo!, and Microsoft. As mentioned previously it may likely became the industry standard in the future if only because the search engines want to use their own proprietary markup.

<div itemscope itemtype="">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="">
  Director: <span itemprop="name">James Cameron</span> 
(born <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>)
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

JSON-LD: (JavaScript Object Notation for Linked Data): Also developed by the good folks at W3C. This markup is perfect for REST based web services and unstructured databases. Like the other markup, JSON is very easy for humans to read, but even more so in my opinion because all of the data is entered in block at the top of the HTML file instead of embedding it throughout a document.

** Note ** The original intention for the development JSON-LD was NOT to help create the “semantic web” per se, but to improve the readability of code between web app developers using APIs.

  "@context": "",
  "@id": "",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": ""

Learn More