Tag Archives: line

Paris Metro Map – The Redesign

When I first visited Paris, it took me a while to get oriented and put together a route using the official map of the Paris metro. That’s all it took to spark the flame inside me to redraw it according to an entirely different set of principles. The goal was extremely ambitious, but why not try?
In this article, I will attempt to describe the principal solutions involved in the development of my own version of the Paris metro map.


Paris Metro Map – The Redesign


The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Layout on the web is hard. The reason it is so hard is that the layout methods we’ve relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design.
Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS Grid Layout and the box alignment module.

This article:  

The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Rand Fishkin’s 5 Simple Experiments for Improving SEO Health

Improve your site's SEO health
Content not ranking on Google? Nurse it back to SEO health with Rand’s five experiments. Image via Shutterstock.

What do you do to get fit, lose weight or improve your overall health? You snack on fewer candies and munch a few more salads. Maybe even hit the gym. Then you cross your fingers and hope to reap the fruits of your labor.

Us marketers tend to adopt a similar approach when working towards our goals. When we want to optimize our content for search, we may “stuff in a few keywords” and “add some internal and external links” to our website.

Somewhere down the line, we expect to see our website creep up in Google. It may… but it may not. And with all the time we spend crafting thoughtful content to drive our business objectives, what’s the point if NO ONE FINDS IT?

The reality is that we — fitness fanatics, marketers, hell, human beings —  assume we know what work is required to achieve our goals. But how can we be sure to get the results we want when our actions are based on what we think works rather than what we know works?

According to Rand Fishkin, co-founder of Inbound.org and self-proclaimed “Wizard of Moz,” the key to achieving results is to run experiments, track our work (not just our progress) and find out what helps get the results we want. And of course, reiterate on the work that brings success.

During his talk at the Call to Action Conference, Rand walked us through five simple SEO experiments that can help us measure the input that creates our desired results. And lucky for you, we walk you through each one below.

So, are you ready to improve your SEO health? On your marks, get set, GO!

Experiment 1: Bolster internal linking

SEO marketers from far and wide recognize that linking to various pages on your website can help improve your Google ranking. Someone lands on your website and will happily delve deeper and deeper through a clever web of internal links, all the while boosting your website’s credibility. Good times… right?

Well, it depends. We can’t just assume that stuffing our webpages willy nilly with internal links will push us up the ranks — even if it seemed to work a dream for someone else. We need to experiment to find out if and how internal linking affects our Google ranking.

Step 1. Choose the webpage you want to rank higher for (a.k.a. your target page). This may be an important page that currently isn’t ranking well. In Rand’s case, he wants his “Keyword research tool” page to rank higher.

Step 2. Decide which term(s) you want your target page to rank for in Google. Then bring up the pages on your website that Google considers to be the most important for this search term by searching in Google for [the term you want your target page to rank for] + [:] + [website name]. As per Rand’s example, he wants his target page to rank for “keyword research tool”. So he would run a search for [keyword research tool] + [:] + [moz.com]”, as per:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 3. Find out if you’ve already linked to the target page in these pages. If not, add a link:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 4. After a predefined amount of time (e.g., two weeks, one month, etc.), track the outcome. Did the target page’s rank drop, improve or stay the same?

If the specific action of adding internal links to your target page positively affects the page’s ranking, repeat the action to boost your other website pages.

Rand’s buddy Shaun Anderson from Hobo Web carried out this experiment over a month. Check out his results:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Just 10 days after he added internal links to his target page, the page shot up the rankings. And when he removed the links later on, it shot back down again.

Experiment 2: Create new content targeting long-tail keywords

Long-tail keywords are the new(ish) kid on the SEO block. They’re keywords of at least three words and are more specific than your regular keyword. Think “soccer boots for kids” rather than a simple “soccer boots”. They’ve also been proven to drive more qualified traffic to websites and therefore increase that all-important conversion rate.

You may have already started optimizing your webpages with these babies (brownie points to you). But it’s now time to start testing out their impact to see if they’re really improving your page rankings.

Step 1. Type in a keyword phrase you want to rank for into a keyword research tool such as Moz’s Keyword Explorer, Uber Suggest or Google Keyword Planner (you’ll need to set up a free account for the latter).

Step 2. Once the results are up, identify long-tail keywords that have low volume, low difficulty and high opportunity. You’re looking for a volume and difficulty level of anything less than around 30, and an opportunity level of 80+. In Rand’s example, “geek gadgets for her” and “cool unique electronic gifts” are good options.

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 3. Create and publish helpful content that targets your chosen long-tail keywords. Use the keywords in the page headline and make sure your content directly relates to the keywords.

Step 4. Track the outcome over time. Hopefully, a couple of weeks or months down the line, you will see a result as good as this one:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Experiment 3: Turn mentions into links

If you’re doing good business, people are likely to be saying good things about your brand on the web. If these mentions don’t link to your website, you’re missing out on a prime backlinking opportunity, which can help boost your website’s SEO. Let’s see how you can turn simple brand chatter into into fuel for your search engine ranking.

Use Google’s date query ranges to research mentions of your company, brand or product on the web. (You could also invest in a tool like Mention, talkwalker or Moz’s Fresh Web Explorer to receive mention alerts.)

Step 1. In the Google search bar, enter the search terms you want to find mentions for. In his example, Rand searched for “keyword explorer moz”.

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 2. Next, tell Google how far back you want to search. Either select the date range from the drop down list (shown above), or manually enter the number of days by simply replacing the last number at the end of the URL:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 3. In the pages that Google pulls up, look for keyword mentions that don’t link back to your website:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 4. This next step requires a bit more creativity. To get that keyword backlinking to your site, you’ll need to contact the mentioner. You could email them or reach out to them on social media and ask them to link back to your website from these pages.


Step 5. Once that backlink has been in place for a few weeks, have a look at your webpage’s ranking. Has it changed?

Experiment 4: Test new titles and headlines

Title element testing has shown to be a rather effective way to optimize web content for clicks. It’s definitely worth experimenting with these short but important nuggets of text. They can be the difference between a user clicking on a webpage or skimming past it, uninterested.

Step 1. Identify the pages of your website that use the templated language for titles and headlines, for example:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 2. It’s time to find out: Are people searching for the keywords in the headlines of these pages? Or are there more popular keywords you could use? Use a keyword planner tool to find the most commonly searched keywords related to your page topic.

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 3. Update the pages in question with your new, more popular keywords.

Step 4. Analyse any changes after a predefined amount of time.

UK-based online marketing agency Distilled did this for their client concerthotels.com. They changed the title and H1 used across a bulk of webpages from:

Title: <<Location>> Hotels, NY | ConcertHotels.com

H1: <<Location>> Hotels


Title: Hotels near <<Location>> Rochester, NY | ConcertHotels.com

H1: Hotels near <<Location>>

As the graph below shows us, they reaped some seriously impressive results:

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Experiment 5:  Add related keywords to your pages

Think you can rank well for a keyword without any related keywords on the same page? Don’t underestimate the power of context, especially when dealing with Google. When you talk about SEO on your website, Google expects you to mention search engines, ranking, keywords, etc. Try adding some related keywords to your content and the search engine big dog may well thank you by upping your webpage’s ranking.

Step 1. Choose the webpage you want to optimize. Identify what the page is about and decide on the most fitting keyword.

Step 2. Find terms that Google associates with this keyword. Use a tool like nTopic or Moz’s related topics tool to get a list of related keywords.

Slide from Rand Fishkin’s CTA Conf talk. Click for full size.

Step 3. Work these new keywords into your webpage’s content, making sure that they sound natural when you read over the text.

Step 4. As always, make sure you measure your results! Has your webpage climbed the rankings after a few weeks or months?


No-one would deny that classic analytics — analyzing the results of our actions — is totally essential for tracking marketing progress. But when it comes to understanding which marketing actions work, we need a different approach.

We simply must stop assuming we know what work will help us achieve our goals. By not only measuring the results, but also experimenting and measuring the actions that you take, you can figure out exactly what you need to do to move the SEO needle, time and time again.

Follow this link – 

Rand Fishkin’s 5 Simple Experiments for Improving SEO Health

40 Responsive Sports Icons [Freebie]

Free icons are always great to spice up our work with minimal effort. Today, we’re happy to release a free set of 40 sports icons in four styles and six formats. Each icon in this set comes in four styles: flat colored, glyph, Google material palette, and line strokes. Additionally, the line icons morph into four responsive sizes, comprising a unique icon at every breakpoint. That way, details adjust according to size while preserving the icons’ style and identity.

Original link – 

40 Responsive Sports Icons [Freebie]


How a Dutch Major Achieved 7.8% Increase in Conversion, by Removing a ‘Lifeline’


A major Dutch healthcare professionals’ association decided to a/b test a seemingly minor change in its header image. Using VWO, it discovered that the change – removing a horizontal line in the image, could lead to a substantial 7.8% higher conversion rate, with almost 100 percent probability for consistent results.

The Client

VVAA, an association of over 75,000 Dutch healthcare professionals, specializes in providing quality advice to its members on areas ranging from setting up and managing a practice, to portfolio management and mortgages.

As a market leader in the healthcare industry and a pioneer in the area of medical liability insurance, VVAA attracts a very healthy traffic to its site. Visitors are greeted with a fairly big header image containing a list of benefits and a CTA button.

Things were good.

Then, the VVAA corporate communication had a design idea. A horizontal line representing a  “lifeline” was added right at the bottom of the header image. The lifeline (that’s what I’m going to call it henceforth), it seemed, would be a good addition since it ties in directly with the industry that VVAA operates in. See the ‘The Test’ section for relevant images of the page.

The Hypothesis

Alwyn de Bruijn, the webmaster over at VVAA felt that the lifeline could be a distraction, leading visitors’ attention away from the CTA button. So, the association decided to A/B test the design against a variation that would be similar in all respects, except that it wouldn’t contain the ‘lifeline’.  The hypothesis was that the variation would convert more visitors (measured as clicks on the CTA).

The Test

The Control

A/B test control


The Variation


The A/B test ran for 20 days, on 7885 visitors who were randomly shown one of the two versions – the control and the variation.

The Result

How often does it happen that a lifeline gets discarded and the patient gets better?

The variation without the horizontal line effected a 7.8% increase in CTA clicks, clocking a super awesome 99.93% confidence level. In other words, VVAA could be 99.93% confident that the variation (without the ‘lifeline’) will yield a 7.8% increase on the number of clicks on the CTA.

Thanks to the A/B test, VVAA earned an objective basis to form a decision, and optimize its page for better conversions.

Now that we’ve got the facts out of our way, let’s look at even more interesting things, like,

Why did the Variation Win?

In Brujin’s own words, the variation (without the horizontal line) won “because the life line affects where visitors eyeline is placed on the page and might miss the CTA at the beginning.”

Let’s break Brujin’s analysis down, further.


Web Page visitors largely read along an F-shaped pattern.

F-shaped reading pattern

Beginning with a horizontal scan of the top section > 

> then moving vertically down the page a bit > advancing across the page horizontally again > 

> and finally going for a quick vertical scan of the rest of the page.

Hold on to that information. There’s another piece to solving this puzzle.  In this study by Neilsen Norman Group, it emerged that visitors spend as much as 69% of viewing time on the left half of the screen.

Keeping both these insights in mind, let’s try and track the eye movement of Bob, a visitor on the VVAA page.

He scans across the page horizontally, covering most of the header elements. Then he moves down the largely empty left section of the page. That’s when the bright orange “lifeline” disrupts his flow. It acts as a leading line, guiding Bob horizontally along the line. By this time, Bob has already moved past the CTA button, which appears above the ‘lifeline’. He might then scan the rest of the page. But, rest assured, Bob and any business potential that Bob presented, have already been lost.

But, it’s right there, the CTA button, you might argue. Why wouldn’t Bob just notice it, and go right back to the real CTA?

Consider this.

What if Bob couldn’t notice the actual CTA button? (no, Bob is not blind)

The Curious Case of ‘False Button’

The ‘lifeline’ carries a bubble about right below the intended CTA button. The bubble also has a text element underneath it that says “Zelf uw zorg kiezen”, which translates to “Choose your care”.

Could the bubble pass for a prominent element – a false CTA, perhaps?

False Button

There’s more. The dialogue box that holds the actual CTA button has an appendage pointing right to the center of the bubble. That’s another cue for the visitor that the bubble itself is of some importance, diluting the attention that the actual CTA would otherwise receive. Also, that the lifeline has the same color as the CTA, doesn’t help with creating any discernible contrast, or a conversion.

But, the CTA is still there! Can’t you expect some Bobs to realize this? Yes, you could expect, but you’d probably be unreasonable in doing so. Why?

Fitts’s Law!

A simplistic explanation of a key tenet of the law is this – the closer and larger a target (a clickable element on a page), the faster it is to click on the target. This awesome Smashing Magazine article points out that the larger the absolute or relative size of a target button, the higher the probability for it to be clicked.

With the false ‘bubble’ button right below the actual CTA, and in the same color, the relative size (and visibility) of the CTA diminishes in the eyes of Bob, killing that tiny weeny chance for the CTA to be noticed.

Interesting? We’re not done yet.

Directional Cue

Directional Cue

The VVAA header image plays on an important psychological prompt – directional cue. By nature, human sight locks in on the eyes (or whatever looks eye-like) of a human or human-like subject and then follow the line-of-sight of the subject. Most likely, this trait has its roots in evolution. In the case in question, the woman’s eyes lead Bob towards the part of the image that has quite a few elements – the actual CTA button, the false button and the pointy bit of the dialogue box appendage. By clustering together these elements, the page robs the actual CTA button of its intended prominence. There goes your Big Orange Button for a toss. And Bob, too.

By taking the lifeline away, and with it the false CTA, the actual CTA gets ample white space around it. This accentuates the importance of the button, improving conversions or  useful clicks on the CTA. Here’s a good read if you think white space is wasted space.

What Do You Think?

Should such seemingly trivial changes (removing the lifeline) be implemented based simply on intuition? Or would it be prudent to have changes, however minor, tested first?

It would also be interesting to know if you are able to identify the possibility of such minor major changes on your current page.

Let us know in the comments section right below. You can also reach me on twitter @SharanTheSuresh or hit us with your thoughts on twitter @wingify.

We’re listening.

UX guide to increase eCommerce sales

The post How a Dutch Major Achieved 7.8% Increase in Conversion, by Removing a ‘Lifeline’ appeared first on VWO Blog.

View this article:  How a Dutch Major Achieved 7.8% Increase in Conversion, by Removing a ‘Lifeline’

CSS Baseline: The Good, The Bad And The Ugly

Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.
This may be due to a lack of understanding and appreciation of the benefits that follow from a baseline grid, but it is more likely because baseline is notoriously difficult to get right, and no one yet holds the blueprint to its successful implementation.

Read More: 

CSS Baseline: The Good, The Bad And The Ugly

Let’s Play With Hardware-Accelerated CSS

If you’re a developer of mobile Web apps, then you’ve heard this before: Native apps perform better than Web apps.
But what does “perform better” mean? In the context above, performance is usually about measurable aspects such as loading time and responsiveness to user interaction. But more often than not, statements about performance lie within the realm of animations and transitions and how smooth they are. [Links checked February/21/2017]


Let’s Play With Hardware-Accelerated CSS

The Messy Art Of UX Sketching

I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch. As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wireframes to presentations. [Links checked & repaired April/11/2017]

My desk.
Although starting a prototype on a computer is sometimes easier, it’s not the best way to visually problem-solve.

See more here: 

The Messy Art Of UX Sketching

Technical Web Typography: Guidelines and Techniques

Editor’s Note: This article is a bit out of date — please proceed reading with caution.
The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

Continue reading: 

Technical Web Typography: Guidelines and Techniques

!important CSS Declarations: How and When to Use Them

When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique declaration. [Links checked February/15/2017]
Further Reading on SmashingMag: CSS Specificity And Inheritance Mastering CSS Principles: A Comprehensive Guide CSS Specificity: Things You Should Know CSS Inheritance, The Cascade And Global Scope Let’s take a look at what exactly these kinds of declarations are all about, and when, if ever, you should use them.


!important CSS Declarations: How and When to Use Them