Landing page analysis of „SIGNALTRANSMITTER“ by Andreas Matschl & team

If you’d like your own landing page to be analyzed, follow my 1-step process.

Andreas requested a landing page analysis (LPA) of signaltransmitter.de/en/. His ideal reader is at stage 1.

Stage 1 means: The reader is not (yet) a reader of his publications. Andreas is a „nobody“ to the reader because he or she doesn’t know he exists. There’s no relationship and there was no prior contact at all.

Andreas and I also haven’t met in person. I have no idea about who Andreas is. This makes the analysis as a stage 1 reader easier for me.

The goal of the analysis

As a reader at stage 1 that I’ll be representing throughout the analysis, Andreas wants me to move to stage 2. Although it would be a step forward in the buyer’s journey, at stage 2 I would still be far away from a purchase. Therefore, the page needs to provide value (or point me to value) that I can apply and see results. Then I’d move up to the next stage.

Consequently, it means that this landing page analysis is not about the conversion or purchase. As a stage 1 reader, I’m totally new to the site. It’s a „nobody“ and means nothing to me. That’s why the analysis is about whether Michael can make me move up or not.

Read below my thought process during the analysis. I recommend opening the screenshot of the original page in parallel to reading the analysis. To see the final result including my amendments open this screenshot.

Keep in mind that although it’ll be my first contact with signaltransmitter.de/en in stage 1 I will use my analytical skills and my 10+ years knowledge in user experience design. So, I’m looking at the site with two pairs of eyes: as a stage 1 reader and as an analyst/optimizer.

Opening signaltransmitter.de/en

I’m opening signaltransmitter.de/en and I’m seeing scrolling text that catches my attention.

The words are:

Your provider for Domains
Your provider for vServer
[ANIMATION TO NEW SLIDE]
NEW - SSD LXC vSERVER - Icon + Order now
[ANIMATION BACK TO THE OLD SLIDE]
Your provider for Webspace
Your provider for SSL-Certificates
[ANIMATION…]
NEW - SSD LXC vSERVER - Icon + Order now
etc.

In the list above, the word that I set in italics (Domains, vServer, Webspace, etc.) is being shown as if it was typed. And the fake-typed word is underlined with a thick yellow line. After having seen two (sometimes one a half) words being typed, the next „slide“ is shown („NEW - SSD LXC vSERVER - Order now“). In total it’s two slides that are shown, which I can see from the two thin lines (or slim rectangles) that indicate the active slide. As soon as the slide changes from one to the other, one slim rectangle receives the color white and the other a gray tone.

I’ve seen this kind of animation with typed-in text when I analyzed Uberspace’s homepage. But the problem here is the lack of coordination. The animation sometimes kicks in too early. This results in a text that is still being animated in the current slide while the animation into the next slide has already started. That should be fixed to make it a well-coordinated „choreography“.

Also, I noticed (without paying attention to more details at this point) that the color scheme is very clear: dark blue on white with yellow as the highlight color.

One thing I didn’t mention yet but noticed already was the name of the site being shown on the first slide as well. It says „SIGNALTRANSMITTER.de“. And I noticed the SIGNALTRANSMITTER logo that includes a small and vague tagline („LET THE HOSTING BEGIN“).

However, back to the slideshow where something feels off.

I don’t particularly like that Andreas is showing the complete URL including the top-level-domain (TLD) in the slideshow. This is especially irritating because it says „.de“ and I’m visiting the English version of the site. It’s irrelevant. Show the brand name or company name and don’t show me a URL unless the company or brand is literally called „SIGNALTRANSMITTER.de“.

Also, keep in mind that in this top section of the site (also called „hero unit“) you want to make your value proposition or tagline super clear. That’s not the case at the moment.

It’s no surprise that from the slideshow animation I only get a rough idea of what you’re doing. Something about servers (or vServers), webspace, domains, SSL certificates, tech stuff. I get that you are running something related to web-hosting. But would I pay attention to you? Make clear from the get-go what it is that you can provide for me. Instead of pushing your name big and bold into my face, make the value proposition the dominating text. I’ll get back to that later after I got a better idea of what you are offering and what your story is (if I’m able to dissect it from the landing page).

Something is also off with the animation itself. It has two slides and they change pretty often which annoys me. Add another slide and slow down the pace of the animation slightly. Give each slide more time.

Moving on.

The top section: navigation menu and copy

Although I spotted both the section with the four icons (Domains, Webspace, vServer, SSL-Certificates) and the pop-up message „SIGNALTRANSMITTER.de - Hosting uses cookies to give its customers the best website experience. Read more“ which I accepted to get rid of the message without reading it properly, I want to pay attention to the top menu first.

The menu has two layers and that’s too much. At the very top with a yellow background and dark text I’m seeing:

Icon + 24/7 Ticketsupport
Icon + Support
Icon + Login
DE EN („EN“ shown as active)

Below that I’m seeing another menu with the following elements:

Icon + „SIGNALTRANSMITTER“ + „LET THE HOSTING BEGIN“ (all three elements shown as one image/logo)
Icon + Home
Icon + Domains
Icon + Hosting
Icon + Server
Icon + About
Icon + FAQ
Icon + Blog

While I’m trying to focus on the menu, the animation I mentioned before is SHOUTING for attention. Very annoying. That’s why I’m stopping the animation. It disturbs my concentration. I also decide to remove the part of the HTML code that shows the animation which is this…

<div class="container silder-title">
    <h1>SIGNAL<wbr>TRANSMITTER<wbr>.de</h1><br>
    <h2 class="text-center text-light">Your provider for <span id="header-typed">SSL-Certificates</span><span class="typed-cursor typed-cursor--blink">|</span></h2>
</div>

…and that…

<div class="container silder-title text-center text-light">
    <h2>NEW</h2><h2 style="color: rgb(254, 201, 5); font-size: 64px; -webkit-user-select: auto;">SSD LXC vSERVER</h2>
    <br>
    <a href="/en/ssd-lxc-vserver" class="btn btn-st"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path></svg><!-- <i class="far fa-shopping-cart"></i> --> Order now</a>
</div>

I will reactivate the animation later again to have the full-page experience but for now I want a „calm“ page.

So, what’s wrong with the menu?

It doesn’t look nice. Some elements are in-line with their respective icon and others have a line-break. For example, „Home“, „Domains“, „FAQ“, and „Blog“ have a line-break between the text and its neighboring icon. „Hosting“, „Server“, and „About“ are in-line with their icon. I don’t understand why. But I’m seeing that these last three menu elements have a sub-menu indicated by an arrow pointing down. Still no reason to screw up the menu like that.

The menu icons also seem outdated and generic for my taste. I’m getting rid of them… those in the 2nd level of the menu bar not on the top-level.

Looking at the code, I’m seeing it’s actually SVG graphics which is good and modern. But I’m removing them anyway. As an example, here is the HTML code for the „Home“ icon that I removed:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path>
</svg>

And I did the same with all other 2nd-level elements.

Now they are all nicely aligned with no more line-breaks. It’s much clearer and my frustration about the visual lack of appeal is gone.

Now, off to the 1st-level menu, the one that starts with „24/7 Ticketsupport“ on the left-hand side.

I’m surprised to see that „24/7 Ticketsupport“ is not a link. It’s just text. What a waste of space. The „Support“ menu element is a link. So, I’m merging both, naming it „24/7 Support“ and…

…removing „24/7 Ticketsupport“…

<div class="row" style="-webkit-user-select: auto;">
    <a data-toggle="tooltip" data-placement="bottom" title="" style="-webkit-user-select: auto;" data-original-title="Bürozeiten: Mo. - Fr. von 09:00 - 18:00">
    <svg aria-hidden="true"" focusable="false" data-prefix="fas" data-icon="clock" class="svg-inline--fa fa-clock fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm57.1 350.1L224.9 294c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v137.7l63.5 46.2c5.4 3.9 6.5 11.4 2.6 16.8l-28.2 38.8c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg><!-- <i class="fas fa-clock" aria-hidden="true"></i> --> 24/7 Ticketsupport
</a>
</div>

Note that I didn’t remove the parent div <div class="col-6"> to not destroy the two-column layout and keep the right-hand side intact (layout-wise).

Here’s the final merger of „24/7 Ticketsupport“ and „Support“:

<span class="d-none d-md-inline" style="-webkit-user-select: auto;">24/7 Support</span>

The lifebelt icon next to the „24/7 Support“ is fine because it emphasizes the meaning of the link.

The only problem now is that „24/7 Support“, „Login“, and „DE EN“ look pretty lonely and there’s too much whitespace on the left-hand side. My tendency is to move the logo up there. My other thought is to merge the two layers of the menu to one menu. I don’t wanna dwell on it too much for now. So, I’m moving on to the next section—I’ll find a solution later.

The offer: Domains, Webspace, vServer, SSL-Certificates

I’m seeing four icons and one word below the logo as well as one sentence and a call-to-action button:

Icon + Domains

In just a few minutes to your own domain.

Button: Register your domain

Icon + Webspace

Cheap web hosting with easy administration.

Button: Order your webspace

Icon + vServer

vServer in all price ranges, with LXC or KVM.

Button: Order your vServer

Icon + SSL-Certificates

Increased security with an SSL certificate.

Button: Order your Certificate

These are four call-to-actions and none of them has visual priority. There’s no hierarchy. I don’t know what to click. Where’s the guidance? Sure, the animation (or „carousel“) above is some kind of guidance but it was only trying to sell the vServer to me.

I’m activating that carousel again to see the full page. After I’ve done that I had my a-ha effect on how to deal with the animation because I identified the problem—that two things are being animated at the same time (I mentioned that before):

The text being typed in
Slides changing back and forth

And I remember there were doubts whether a carousel animation is effective. According to Nielsen/Norman, carousels have usability drawbacks because you can’t make sure that the reader sees what you’re showing. That’s why I’m getting rid of the animation and replacing it with a clear call-to-action for the reader…

Taking a step back: Fixing the carousel animation

I’m removing the carousel indicators which I previously described as „slim rectangles“:

<ol class="carousel-indicators">
    <li data-target="#stHeaderSlider" data-slide-to="0" class="active"></li><li data-target="#stHeaderSlider" data-slide-to="1" class=""></li>
</ol>

Then I’m removing what’s inside <div class="carousel-inner" role="listbox">:

<div class="carousel-item active carousel-item-left" style="background-color: rgb(23, 24, 45); background-position: initial initial; background-repeat: initial initial;">
    <div class="container silder-title">
        <h1>SIGNAL<wbr>TRANSMITTER<wbr>.de</h1><br>
        <h2 class="text-center text-light">Your provider for <span id="header-typed">vServer</span><span class="typed-cursor">|</span></h2></div><div class="hidden" id="header-typed-strings" style="display: none;">
        <p>Domains</p>
        <p>vServer</p><p>Webspace</p><p>SSL-Certificates</p>
    </div>
    <script type="text/javascript">
        var typedHeader = new Typed('#header-typed', {
      stringsElement: '#header-typed-strings',
      startDelay: 500,
      typeSpeed: 100,
      backSpeed: 50,
      loop: true
      });
  </script>
</div>

This removes the first slide where it says „SIGNALTRANSMITTER.de - Your provider for…“.

So this HTML code was left:

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active" style="background-color: rgb(23, 24, 45); background-position: initial initial; background-repeat: initial initial;">
        <div class="container silder-title text-center text-light">
        <h2>NEW</h2><h2 style="color: rgb(254, 201, 5); font-size: 64px;>SSD LXC vSERVER</h2>
        <br>
        <a href="/en/ssd-lxc-vserver" class="btn btn-st"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path></svg><!-- <i class="far fa-shopping-cart"></i> --> Order now</a>
        </div>
    </div>
</div>

That’s what I’m seeing now, after the reduction:

NEW - SSD LXC vSERVER - Icon + Order now

I will rewrite this into something more targeted in a second. But before I do that there’s another thing that bothered me and that I want to address (see the following side note).

Side note: I’m annoyed by the noise outside. There’s a primary school just 50 meters away from where I’m living. I closed the window and tried to ignore it but it became such a huge annoyance at some point that I decided to take a break. Analyzing with that noise level only makes me angry and influences my critical thinking. I was also getting hungry (in other words „angry“) because I hadn’t had breakfast yet. So, I ate something and used the break to do important client work as well.

{taking a break}

Alright, let’s finish the former carousel animation and turn it into a nice call-to-action…

I understand that you want to promote your new kind of server („SSD LXC vSERVER“) but why don’t you tell me first why I would want to order it? I’m new to your brand and your website. Sell me on your hottest thing by showing me how it can work for me.

The old copy was (visible in this screenshot version of the original page):

NEW

SSD LXC vSERVER

Button: Icon + Order now

The new copy could be:

Our popular SSD LXC vSERVER

Secure, fast, reliable Linux servers

Our cloud servers have all the benefits of a virtual machine (VM) but without the overhead of running a separate kernel and simulating all the hardware. They’re fast and reliable thanks to solid-state drives (SSD) that also meet military security requirements.

Button: Get your LXC server

Now the site is alive, and there’s copy that you can parse as a regular human being. Also, note that writing the new copy there was some research involved because I was not immediately familiar with „LXC“ and other terms.

I want to give the hero area a bit more space and the call-to-action button should be set in bold. So, I added a bottom padding to the slideshow…

.container.silder-title {
    padding: 200px 0 75px 0;
}

…, a bottom margin to the header…

header#page-header {
    margin-bottom: 25px;
}

…, and I adjusted the button text’s font-weight:

.btn-st {
    font-weight: bold;
}

I also removed the cart icon although I wasn’t sure at first. But it looks cleaner without:

<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path>
</svg>

Let’s focus on the section with the four call-to-actions we glanced at before.

Step forward: Fixing the offer and the domain check

I mentioned that the icons plus text, one sentence, and call-to-action are sitting there without much context. They don’t seem to belong to each other.

Instead of making it four unrelated options, make them part of one coherent story that starts with a domain and ends with an SSL certificate. In the story (or „user flow“) you can provide options to skip a step. For example, if the reader has a domain and he only needs webspace and a server, show him that he can do that. But present the story flow first.

While thinking, I’m also seeing the „Domaincheck“ headline and this copy:

Domaincheck

In just a few minutes to your own domain.

Placeholder URL: my-new-domain.de

Button: Search

.de ab 6,36 €

.at ab 9,99 € 14,99 €

.eu ab 3,99 € 6,99 €

.com ab 11,64 €

.net ab 16,50 €

.xyz ab 14,28 €

Keep in mind that all copy (also the placeholder text) is helping the sale.

My plan now is to merge the four offers (Domains, Webspace, vServer, SSL-Certificates) and the „Domaincheck“.

First, I’m moving up the domain check so that searching for a domain becomes immediately visible after the „Get your LXC server“ call to action.

The domain check now becomes part of the <div id="c2" class="frame frame-default frame-type-html frame-layout-0"> container:

    <div class="container text-center">
        <h2>Domaincheck</h2>
        <p>In just a few minutes to your own domain.</p>
        <div class="input-group mb-3 col-md-12 m-auto">
            <form class="input-group mb-3 m-auto" method="get" action="https://signaltransmitter.de/en/domaincheck">
                <input id="domainsearch-home" placeholder="my-new-domain.de" type="text" class="form-control" aria-describedby="search-button" name="string">
                <div class="input-group-append">
                    <button class="btn btn-st" type="submit" id="search-button"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path></svg><!-- <i class="fal fa-search"></i> --> Search</button>
                </div>
            </form>
            <div class="row mt-3">
                <div class="col-sm-2 col-4">
                    <h5><a href="/en/de-domain" class="badge badge-st-link">.de ab 6,36 €</a></h5>
                </div>
                <div class="col-sm-2 col-4">
                    <h5><a href="/en/at-domain" class="badge badge-st-link">.at ab <span class="text-success font-weight-bolder">9,99 €</span> <span class="text-muted small"><s>14,99 €</s></span></a></h5>
                </div>
                <div class="col-sm-2 col-4">
                    <h5><a href="/en/eu-domain" class="badge badge-st-link">.eu ab <span class="text-success font-weight-bolder">3,99 €</span> <span class="text-muted small"><s>6,99 €</s></span></a>
                    </h5>
                </div>
                <div class="col-sm-2 col-4">
                    <h5><a href="/en/com-domain" class="badge badge-st-link">.com ab 11,64 €</a></h5></div><div class="col-sm-2 col-4"><h5><a href="/en/net-domain" class="badge badge-st-link">.net ab 16,50 €</a></h5>
                </div>
                <div class="col-sm-2 col-4">
                    <h5><a href="/en/xyz-domain" class="badge badge-st-link">.xyz ab 14,28 €</a></h5>
                </div>
            </div>
        </div>
    </div>

Now I’m tackling the copy. The new copy is:

Start with your domain (alternative: Get your domain with a few clicks)

If you’re only getting started, search for your domain name first.

Placeholder: Go big with your next domain

Search icon only (no text)

The following sample prices are written in German. I won’t translate them (which would be necessary) because I want to get rid of them and only leave one sample, this one:

<div class="col-sm-2 col-4">
    <h5 style="-webkit-user-select: auto;"><a href="/en/com-domain" class="badge badge-st-link" style="-webkit-user-select: auto;">.com ab 11,64 €</a></h5>
</div>

But I’m changing the copy to:

Get a .com domain at 11,64 EUR

I can’t think straight anymore. I’m taking another break and will continue tomorrow.

{taking a break}

I took my break which lasted 19 days. (I had important things to do). That’s why I revisited what I wrote before and made the changes on the live site again.

Let’s continue where we stopped.

The input field for domain search is so narrow. Let’s increase its height…

.form-control {
    /*…*/
    height: calc(2.5em + .75rem + 2px);
}

…and lower its width:

input-group {
    /*…*/
    padding: 0 5em;
}

I would have liked to see the yellow submit button with more width but I wasn’t able to change it. So I left it as it was.

The small call-to-action „Get a .com domain at 11,64 EUR“ is misaligned which I’m fixing now…

.badge {
    /*…*/
    margin-left: 6em;
}

We can now remove the „Register your domain“ call to action…

<a href="/en/domains" class="tld-promo col-md-3">
    <div class="card text-center no-bg">
        <div class="card-body">
            <div class="card-icon">
                <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="globe" class="svg-inline--fa fa-globe fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg="">
                    <path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7zM248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56zM48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40zm20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7zm67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7zM248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112zm70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40zm10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7zM366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40h-77.7z">
                </path>
            </svg>
            <!-- <i class="far fa-globe"></i> -->
        </div>
        <h5 class="card-title">Domains</h5>
        <p class="card-text">In just a few minutes to your own domain.</p>
        <button class="btn btn-st mt-3"><b>Register your domain</b></button>
        </div>
    </div>
</a>

…because this is covered by the domain check input field.

When I wrote the following newly added copy I was aiming for a conversational style…

…then get some webspace and SSL encryption to protect your data.

Now pick your favorite webspace with easy administration and add an SSL certificate to make your website extra secure. You can also choose your virtual server for more demanding applications.

While I was working on the copy I also changed…

Get a .com domain at 11,64 €

to…

Get a .com at 11,64 €.

It’s shorter and more conversational. And I added it to the copy text (this is the HTML code):

<p>If you’re only getting started, search for your domain name first.&nbsp;<a href="/en/com-domain" class="badge badge-st-link">Get a .com at 11,64 €.</a></p>

And I amended the .badge CSS class:

.badge {
    /*display: inline-block;*/
    padding: .25em .1em;
    /*font-size: 75%;*/
    font-weight: 700;*/
    /*line-height: 1;*/
    /*text-align: center;*/
    /*white-space: nowrap;*/
    /*vertical-align: baseline;*/
    border-radius: .25rem;
    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    /*margin-left: 6em;    */
}

I then amended the copytext from…

Now pick your favorite webspace with easy administration and add an SSL certificate to make your website extra secure. You can also choose your virtual server for more demanding applications.

to…

With your registered domain, you can pick a webspace that is easy to handle and upload your files to. Then add an SSL certificate to protect your website from data thieves. You can also choose your virtual server for more demanding online applications.

And I added an inline top-margin to that paragraph…

<p style="margin-top: 3rem;">With your registered domain, you can <a href="https://signaltransmitter.de/en/hosting" class="badge badge-st-link">pick a webspace</a> that is easy to handle and upload your files to. Then add an SSL certificate to <a href="https://signaltransmitter.de/en/ssl-zertifikate" class="badge badge-st-link">protect your website</a> from data thieves. You can also <a href="https://signaltransmitter.de/en/ssd-lxc-vserver" class="badge badge-st-link">choose your virtual server</a> for more demanding online applications.</p>

…and I added a top-margin to all paragraphs:

p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

Then I decided to take a break because I had an appointment with my theater group in the evening.

{taking a break}

The morning after I continued…

The hyperlinks have a blue color (#007bff) which is inconsistent with the SIGNALTRANSMITTER brand colors. I turned them into yellow and added the .badge and badge-st-link CSS classes to make the links look exactly like the „Get a .com at 11,64 €.“ text.

Now the HTML code of the paragraph looked like this:

<p>With your registered domain, you can <a href="https://signaltransmitter.de/en/hosting" class="badge badge-st-link">pick a webspace</a> that is easy to handle and upload your files to. Then add an SSL certificate to <a href="https://signaltransmitter.de/en/ssl-zertifikate" class="badge badge-st-link">protect your website</a> from data thieves. You can also <a href="https://signaltransmitter.de/en/ssd-lxc-vserver" class="badge badge-st-link">choose your virtual server</a> for more demanding online applications.</p>

I also added more top-margin to the sub-heading of this section:

<div class="container text-center" style="margin-top: 25px;">
    <h3>…then get some webspace and SSL encryption to protect your data</h3>
</div>

Explaining the simple 3+1-step process visually

Then I created this graphic to give the reader more guidance and more visual appeal to the site.

The font I used for the text in the progress line was Roboto which comes at no charge for commercial usage. And to imitate hand-written text, I used Guthen Bloots which requires a commercial license if you want to use it on your landing page. You can buy a license here for 399 USD.

I embedded the graphic into the site using this code:

<p><img src="https://secure23.syncusercontentpro.com/mfs-60:e2f29c2bb07c83043baa7cf9a06f7406=============================/p/06-andreas-matschl-lpa-4-steps-domain-webspace-ssl-vserver-domain-done.png?allowdd=0&datakey=CPWqFF5UKi2oTBTjPFmcnkhEqaTzJQ6j4fOYKz3VzR2DFBubxwZVe08hTsndTdk5WAdVGTqZpvhRukJBemgdWn05DX43sMkmjRV2B3F3mbhREWNlUG4w8se41NEPcKIspJAHlEJjmMrjzEh4P+0Ug6SpisNpEjAAUvqBfixh0kW7eeNN/gZO2KcudPEE0RrhWU+J1bgzLZF0BkoVFe/IMUjKg+ouay0dNOUCHQH5sBFqICgvoFhWKmCdlFtsJclBUxz9UPlPC4Pmp0UT334GlOSWOF4KpbK8SLgjH1uYE3COGjKF9IxX9pFXxPERN1XE+YLd8iDvUzAaR6YL2+Qi7g&engine=ln-3.1.28&errurl=JxR3KCij+fsfF8tT1dASAeROy68hnc013rJeTq+398/P3KJiAQScnoVeWhdYqSJhs1ZNK03J1Rm9UHJBfjBWKgrqVRKNWQ5aOrJZtDxhPZI9CpRXh1qSbtNUrzI6f9yB37fGetOUU3XO9VdexsaxOzUYGyTc5P+ULCREMRKma7FAHcNSo57MoJOF5CVm+cqcx11QtwFIuUIGqyGK0FFfeoAZyZOclVHoAqo7h4rXsjWM7TJ1P4AXbQdV8Ilg7zO06sl+3HQcRN9ffODC6TWtuhSpOTniJj8dQIVQOzlJziAWt0+eCSet8CNPpcZJa+OUK5q4e9kUW1zeEYoI29cfiQ==&header1=Q29udGVudC1UeXBlOiBpbWFnZS9wbmc&header2=Q29udGVudC1EaXNwb3NpdGlvbjogaW5saW5lOyBmaWxlbmFtZT0iMDYtYW5kcmVhcy1tYXRzY2hsLWxwYS00LXN0ZXBzLWRvbWFpbi13ZWJzcGFjZS1zc2wtdnNlcnZlci1kb21haW4tZG9uZS5wbmciO2ZpbGVuYW1lKj1VVEYtOCcnMDYtYW5kcmVhcy1tYXRzY2hsLWxwYS00LXN0ZXBzLWRvbWFpbi13ZWJzcGFjZS1zc2wtdnNlcnZlci1kb21haW4tZG9uZS5wbmc7&ipaddress=215a6cd2f5b5177790439ed7a11f71807691a779&linkcachekey=e32251930&linkoid=202090002&mode=100&sharelink_id=8091847490002&timestamp=1567668006815&uagent=09bd048331a09c16ae3c5ff4db5a55676836a128&signature=aff20137a66e2c686a4619bce6cc72b143e07edc&cachekey=60:e2f29c2bb07c83043baa7cf9a06f7406=============================" width="900"></p>

And I added the headline:

…then only 2 more steps…

Then I rearranged the sections: The new graphic plus headline below the domain search function and the copy text about webspace and SSL encryption between the graphic and headline.

I removed the sub-headline:

<h3>…then get some webspace and SSL encryption to protect your data</h3>

And I added a subtle CSS-powered background color for the graphic to visually stand out a bit more…

background: #FBF7F0;

…I also removed one sub-headline, and I worked on the copy a bit more.

This is the copy text so far (below the top hero unit).

Start with your domain (step 1)…

If you’re only getting started, search for your domain name first. Get a .com at 11,64 €.

After you registered a domain, you can pick a webspace that is easy to handle and upload your files to. Then add an SSL certificate to protect your website from data thieves. You can also choose a virtual server to run more demanding applications.

With your registered domain, it’s only 2 more steps…

[GRAPHIC]

And this is the HTML code of it…

„Start with your domain (step 1)…“:

<div class="container-fluid pt-4 pb-5">
    <div class="container text-center">
        <h2>Start with your domain (step 1)…</h2>
        <p>If you’re only getting started, search for your domain name first. <a href="https://signaltransmitter.de/en/com-domain" class="badge badge-st-link">Get a .com at 11,64 €.</a></p>
        <div class="input-group mb-3 col-md-12 m-auto">
            <form class="input-group mb-3 m-auto" method="get" action="https://signaltransmitter.de/en/domaincheck"><input id="domainsearch-home" placeholder="Go big with your next domain" type="text" class="form-control" aria-describedby="search-button" name="string">
                <div class="input-group-append">
                    <button class="btn btn-st" type="submit" id="search-button"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path></svg><!-- <i class="fal fa-search"></i> --></button>
                </div>
            </form>
        </div>
    </div>
</div>

„After you registered a domain…“:

<div class="container text-center" style="margin-top: 50px;">
    <p>After you registered a domain, you can <a href="https://signaltransmitter.de/en/hosting" class="badge badge-st-link">pick a webspace</a> that is easy to handle and upload your files to. Then add an SSL certificate to <a href="https://signaltransmitter.de/en/ssl-zertifikate" class="badge badge-st-link">protect your website</a> from data thieves. You can also <a href="https://signaltransmitter.de/en/ssd-lxc-vserver" class="badge badge-st-link">choose a virtual server</a> to run more demanding applications.</p>
</div>

„With your registered domain, it’s only 2 more steps…“:

<div class="container-fluid pt-4 pb-5" style="background: #FBF7F0;">
    <div class="container text-center" style="margin-top: 25px;">
        <h3>With your registered domain, it’s only 2 more steps…</h3><p><img src="https://secure23.syncusercontentpro.com/mfs-60:e2f29c2bb07c83043baa7cf9a06f7406=============================/p/06-andreas-matschl-lpa-4-steps-domain-webspace-ssl-vserver-domain-done.png?allowdd=0&datakey=CPWqFF5UKi2oTBTjPFmcnkhEqaTzJQ6j4fOYKz3VzR2DFBubxwZVe08hTsndTdk5WAdVGTqZpvhRukJBemgdWn05DX43sMkmjRV2B3F3mbhREWNlUG4w8se41NEPcKIspJAHlEJjmMrjzEh4P+0Ug6SpisNpEjAAUvqBfixh0kW7eeNN/gZO2KcudPEE0RrhWU+J1bgzLZF0BkoVFe/IMUjKg+ouay0dNOUCHQH5sBFqICgvoFhWKmCdlFtsJclBUxz9UPlPC4Pmp0UT334GlOSWOF4KpbK8SLgjH1uYE3COGjKF9IxX9pFXxPERN1XE+YLd8iDvUzAaR6YL2+Qi7g&engine=ln-3.1.28&errurl=JxR3KCij+fsfF8tT1dASAeROy68hnc013rJeTq+398/P3KJiAQScnoVeWhdYqSJhs1ZNK03J1Rm9UHJBfjBWKgrqVRKNWQ5aOrJZtDxhPZI9CpRXh1qSbtNUrzI6f9yB37fGetOUU3XO9VdexsaxOzUYGyTc5P+ULCREMRKma7FAHcNSo57MoJOF5CVm+cqcx11QtwFIuUIGqyGK0FFfeoAZyZOclVHoAqo7h4rXsjWM7TJ1P4AXbQdV8Ilg7zO06sl+3HQcRN9ffODC6TWtuhSpOTniJj8dQIVQOzlJziAWt0+eCSet8CNPpcZJa+OUK5q4e9kUW1zeEYoI29cfiQ==&header1=Q29udGVudC1UeXBlOiBpbWFnZS9wbmc&header2=Q29udGVudC1EaXNwb3NpdGlvbjogaW5saW5lOyBmaWxlbmFtZT0iMDYtYW5kcmVhcy1tYXRzY2hsLWxwYS00LXN0ZXBzLWRvbWFpbi13ZWJzcGFjZS1zc2wtdnNlcnZlci1kb21haW4tZG9uZS5wbmciO2ZpbGVuYW1lKj1VVEYtOCcnMDYtYW5kcmVhcy1tYXRzY2hsLWxwYS00LXN0ZXBzLWRvbWFpbi13ZWJzcGFjZS1zc2wtdnNlcnZlci1kb21haW4tZG9uZS5wbmc7&ipaddress=215a6cd2f5b5177790439ed7a11f71807691a779&linkcachekey=e32251930&linkoid=202090002&mode=100&sharelink_id=8091847490002&timestamp=1567668006815&uagent=09bd048331a09c16ae3c5ff4db5a55676836a128&signature=aff20137a66e2c686a4619bce6cc72b143e07edc&cachekey=60:e2f29c2bb07c83043baa7cf9a06f7406=============================" width="900" style=""></p>
    </div>
</div>

Creating a new section with clearer call-to-actions

Then I defined new sections for Webspace, SSL certificate, and vServer. I started with the Webspace section because it’s the second step after buying a domain.

Enjoy our best-selling webspace (step 2)

We have a number of web-hosting offers but if you want what most of our customers pick, get our large webspace for 5,99€/mo. Includes 15 GB SSD storage, five databases, 25 email accounts, and fair-use traffic usage.

[ICON]

Button: Get your large webspace

Cheap web hosting. Easy administration.

Because I got rid of some of the original CSS classes, and the button now had a blue link color, I defined my own inline CSS style for the button:

<button class="btn btn-st mt-3">
    <a href="https://cp.signaltransmitter.de/en/cart/addToCart/682?_setLocale=1" style="color: #000;">Get your large webspace</a>
</button>

And I updated the mouse-over style as well:

a:hover {
    text-decoration: none;
}

Here’s the full HTML code of this step 2 section:

<div class="container-fluid pt-4 pb-5">
    <div class="container text-center" style="margin-top: 25px;">
        <h3>Enjoy our best-selling webspace (step 2)</h3>
        <p>We have a number of web-hosting offers but if you want what most of our customers pick, <a href="https://cp.signaltransmitter.de/en/cart/addToCart/682?_setLocale=1" class="badge badge-st-link">get our large webspace</a> for 5,99€/mo. Includes 15 GB SSD storage, five databases, 25 email accounts, and fair-use traffic usage.</p>
        <div class="card-icon">
            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="browser" class="svg-inline--fa fa-browser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM48 92c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V92zm416 334c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V168h416v258zm0-310c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12V92c0-6.6 5.4-12 12-12h280c6.6 0 12 5.4 12 12v24z"></path></svg>
            <!-- <i class="far fa-browser"></i> -->
        </div>
        <button class="btn btn-st mt-3"><a href="https://cp.signaltransmitter.de/en/cart/addToCart/682?_setLocale=1" style="color: #000;">Get your large webspace</a></button>
        <p><em>Cheap web hosting. Easy administration.</em></p>
    </div>
</div>

Then the SSL certificate section followed:

Most customers trust this SSL certificate (last step)

You can’t afford data theft because your customers trust you. Protect their data stored on your server and make sure your identity is hidden from people with malicious intentions. If you want quick-and-easy protection, pick our most-trusted SSL certificate for 9,99€/year.

[ICON]

Button: Choose our most-trusted SSL encryption

Protects your identity and your customers’ data.

Here’s the full HTML code of this step 3 section:

<div class="bg-st-blue container-fluid pt-4 pb-5">
    <div class="container text-center" style="margin-top: 25px;">
        <h3>Most customers trust this SSL certificate (last step)</h3><p>You can’t afford data theft because your customers trust you. Protect their data stored on your server and make sure your identity is hidden from people with malicious intentions. If you want quick-and-easy protection, <a href="https://cp.signaltransmitter.de/en/cart/addToCart/578?_setLocale=1" class="badge badge-st-link">pick our most-trusted SSL certificate</a> for 9,99€/year.</p>
        <div class="card-icon">
            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 192h-32v-46.6C368 65.8 304 .2 224.4 0 144.8-.2 80 64.5 80 144v48H48c-26.5 0-48 21.5-48 48v224c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V240c0-26.5-21.5-48-48-48zm-272-48c0-52.9 43.1-96 96-96s96 43.1 96 96v48H128v-48zm272 320H48V240h352v224z"></path></svg><!-- <i class="far fa-lock"></i> -->
        </div>
        <button class="btn btn-st mt-3"><a href="https://cp.signaltransmitter.de/en/cart/addToCart/578?_setLocale=1" style="color: #000;">Choose our most-trusted SSL encryption</a></button>
        <p><em>Protects your identity and your customers’ personal data.</em></p>
    </div>
</div>

Giving the SSL certificate section a dark-blue background makes sense because the white-text-on-dark-background color scheme instills more trust (visually speaking) than a dark-text-on-white-background scheme.

I then unified the padding values for each content section by applying the same CSS values to their container:

Section: „Start with your domain (step 1)…“

<div class="container-fluid pt-5 pb-5">/*…*/</div

Section: „With your registered domain, it’s only 2 more steps…“

<div class="container-fluid pt-5 pb-5" style="background: #FBF7F0;">/*…*/</div

Section: „Enjoy our best-selling webspace (step 2)“

<div class="container-fluid pt-5 pb-5">/*…*/</div

Section: „Most customers trust this SSL certificate (last step)“

<div class="bg-st-blue container-fluid pt-5 pb-5">/*…*/</div

Now I had in mind to create another section for the vServer so that the best-selling server also gets its place. To get started you don’t need a virtual private (VPS)—you only need a domain, webspace, and SSL. Getting a server is an optional step for a customer, not a required one. Also, the LXC server is very dominant on top of the page. That’s why I’m giving this vServer section a regular visual appeal.

But before I did that it was time for another break because of an appointment with my acting coach in the evening.

{taking a break}

It’s the morning after and, unfortunately, all the changes I had made on the live site are gone although I had left my computer on standby and didn’t close the browser window. So, before I could continue, I had to apply the recent changes I’ve made before. Annoying but the way it is.

Adding optional step 4 as a new section

Our customers love this virtual server (vServer)

You can run simple applications if you bought a domain, webspace, and an SSL certificate from us. But if you need more performance (speed!) then buy our best-selling cloud server. Features up to 1 GBit/s bandwidth, 2 GB RAM, two vCores, and a 45 GB solid-state-drive (SSD) for 4,49€/mo.

[ICON]

Button: Get our best-selling Linux server

Super fast. Highly protected. Our customers love it.

P.S. if you want more control, configure a root server.

Here’s the full HTML code of this step 4 section:

<div class="container-fluid pt-5 pb-5">
    <div class="container text-center" style="margin-top: 25px;">
        <h3>Our customers love this virtual server (vServer)</h3><p>You can run simple applications if you bought a domain, webspace, and an SSL certificate from us. But if you need more performance (speed!) then&nbsp;<a href="https://cp.signaltransmitter.de/en/cart/addToCart/691?_setLocale=1" class="badge badge-st-link">buy our best-selling cloud server</a>. Features up to 1 GBit/s bandwidth, 2 GB RAM, two vCores, and a 45 GB solid-state-drive (SSD) for 4,49€/mo.</p>
        <div class="card-icon">
            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="server" class="svg-inline--fa fa-server fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 208v96a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 304v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z"></path></svg><!-- <i class="far fa-server"></i> -->
        </div>
        <button class="btn btn-st mt-3">
            <a href="https://cp.signaltransmitter.de/en/cart/addToCart/691?_setLocale=1" style="color: #000;">Get our best-selling Linux server</a>
        </button><p><em>Super fast. Highly protected. Our customers love it.</em></p>
        <p><em>P.S. if you need more control about your server, <a href="https://signaltransmitter.de/en/vps-configurator" class="badge badge-st-link">configure a root server</a>.</em></p>
    </div>
</div>

I then deleted the whole section that was titled „Our bestsellers“ and some tiny fragments that were left.

Status overview is important and moves into the menu bar

I also decided to give the „Status Overview - All systems are working properly.“ section a new home. This kind of information is crucial for a service provider that is offering online servers that are supposed to run error-free all the time. Putting the status on top (and not hiding it somewhere on the page) also adds trust from the reader towards SIGNALTRANSMITTER.

The copy before (with its own section):

Status Overview

All systems are working properly.

The copy after (now as part of the top menu bar):

Status: All systems working properly.

So I copied this code from its original location…

<div role="alert" class="alert alert-success">
All systems are working properly.
</div>

…and moved it up to the menu bar:

<div class="col-6">
    <div class="alert alert-success" role="alert">Status: All systems working properly.</div>
</div>

It now sits exactly where you previously saw the more-or-less dead „24/7 Ticketsupport“

Then I amended the CSS style of the text slightly:

.alert {
    position: relative;
    padding: none;
    margin: .25rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    width: 62%;
    text-align: center;
    font-size: 15px;
}

.alert-success {
    color: #1F5A1A;
    background-color: #E7F2E4;
    border-color: #1F5A1A;
}

I wasn’t happy with the result so I made some more changes to the copy and the design. Inspired by the Cloudflare Status page…

Copy before:

Status: All systems working properly.

Copy after:

All systems operational

CSS code before: see above

CSS code after:

.alert-success {
    color: #fff;
    background-color: #54934E;
}

.alert {
    position: relative;
    padding: none;
    margin: .35rem 0;
    border: 1px solid transparent;
    border-radius: .25rem;
    width: 40%;
    text-align: center;
    font-size: 15px;
}

The copy is shorter, the design is clearer and works well. To make the copy even more practical I turned it into a link that is linking to status.signaltransmitter.de:

All systems operational

This also meant that I had to adjust the CSS style again because the link text turned to black. I changed it to white:

<a href="https://status.signaltransmitter.de" style="color: #fff;">All systems operational</a>

I’m happy with the result. I turned a passive „24/7 Ticketsupport“ text into a valuable system status that is visually appealing and also linking to the system status page. The only bummer is: The status page is only in German. You should offer an English translation as well.

The morning is already over and I’m taking a break. I will continue after with a testimonials section that is missing at the moment. Feedback from actual customers is sometimes all it takes to turn a reader (website visitor) into a customer.

{taking a break}

The break is over, and it’s still the same day.

Customer testimonials help make the sale

Let’s add a new section to show what SIGNALTRANSMITTER customers say:

What our customers say…

Transparency is important to us. That’s why we openly share our customers’ feedback. We’ve received feedback from 468 customers on ProvenExpert.com. Our average rating is 4,62 out of 5 stars. Here are some of the latest reviews…

Feedback 1:

Very happy, but sometimes I would have wanted faster support.

A. (4,4/5)

Feedback 2:

I already had a few different hosting companies (for webspace, domains, and servers). But I haven’t been as satisfied with any of them as I’m now with Signaltransmitter.

The team offers top-quality service for the price.

I don’t know even remember how many years I’ve been a customer. But I recommend them without hesitation!

5 stars.

Daniel F. (5/5)

Feedback 3:

vServer: Except for strange, sporadically occurring server loads at actually unused test server very stable and reliable. In spite of this small point in total an excellent performance.

Günther F. (4,6/5)

Feedback 4:

I switched from a prepaid hoster to Signaltransmitter because those prepaid hosters always had technical problems. And the vServer that I leased didn’t reach the performance level I wanted.

Everything went smoothly with Signaltransmitter and the server is performing well. I had it running around the clock for 3 months without a single crash, that’s top quality at a great price!

The customer support was always friendly and competent. And even when I forgot to pay the bill, my stored (and valuable) data was not immediately gone but „frozen“ until I was able to make the payment again. All in all, no flaws!

Malte S. (4,9/5)

Feedback 5:

I recommend you to anyone I talk to about server and web hosting. Keep it up! :)

Dominic W. (5/5)

Additional paragraph:

As a company based in Germany, most of our customers are speaking German. That’s why the reviews were originally written in German, and we translated some of the latest feedback into English.

Read all 468 reviews on ProvenExpert.com

This is the HTML code of the testimonials section so far:

<div class="container-fluid pt-5 pb-5" style="background: #FBF7F0;">

    <div class="container text-center" style="margin-top: 25px;">

        <h3>What our customers say…</h3><p>Transparency is important to us. That’s why we openly share our customers’ feedback. we’ve received feedback from 468 customers on <a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/#ratings" class="badge badge-st-link">ProvenExpert.com</a>. Our average rating is 4,62 out of 5 stars. Here are some of the latest reviews…</p><hr>

        <blockquote>
        <p><strong>Very happy</strong>, but sometimes I would have wanted faster support.</p>
        </blockquote>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1N3pjVUpkAUBmMGZjNaA1Z3A2ZwpjWUA" class="badge badge-st-link">A.</a> (4,4/5)</p>

        <hr>

        <blockquote>
        <p>I already had a few different hosting companies (for webspace, domains, and servers). But I haven’t been as satisfied with any of them as I’m now with Signaltransmitter.</p>

        <p>The team offers <strong>top-quality service</strong> for the price.</p>

        <p>I don’t know even remember how many years I’ve been a customer. But <strong>I recommend them without hesitation!</strong></p>

        <p>5 stars.</p>
        </blockquote>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NKp2R3AhOGp3twA44TAj5JA1ZUp14zZ" class="badge badge-st-link">Daniel F.</a> (5/5)</p>

        <hr>

        <blockquote>
        <p>vServer: Except for strange, sporadically occurring server loads at actually unused test server <strong>very stable and reliable</strong>. In spite of this small point in total an <strong>excellent performance</strong>.</p>
        </blockquote>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NKp1ZKpk5Jp3twA44JZlSGB2xwo3R3Z" class="badge badge-st-link">Günther F.</a> (4,6/5)</p>

        <hr>

        <blockquote>
        <p>I switched from a prepaid hoster to Signaltransmitter because those prepaid hosters always had technical problems. And the vServer that I leased didn’t reach the performance level I wanted.</p>

        <p>Everything went smoothly with Signaltransmitter and <strong>the server is performing well</strong>. I had it running around the clock for 3 months without a single crash, that’s <strong>top quality at a great price!</strong></p>

        <p>The customer support was <strong>always friendly and competent</strong>. And even when I forgot to pay the bill, my stored (and valuable) data was not immediately gone but „frozen“ until I was able to make the payment again. <strong>All in all, no flaws!</strong></p>
        </blockquote>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NaoiAmpjWmAiWaZ5RKAiumA14zAlS3Z" class="badge badge-st-link">Malte S.</a> (4,9/5)</p>

        <hr>

        <blockquote>
        <p>I recommend you to anyone I talk to about server and webhosting. Keep it up! :)</p>
        </blockquote>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1Nao2ZKBkWmZ5xQZkqGAhWGBlHGZkO3Z" class="badge badge-st-link">Dominic W.</a>&nbsp;(5/5)</p>

        <hr>

        <p>As a company based in Germany, most of our customers are speaking German. That’s why the reviews were originally written in German, and we translated some of the latest feedback into English.</p>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/#ratings" class="badge badge-st-link">Read all 468 reviews on ProvenExpert.com</a></p>

    </div>
</div>

Then I styled the block-quotes and the section overall. I also repurposed the ProvenExpert.com HTML code (that was already embedded on the landing page) to show the star rating below each testimonial. Here is the complete code (HTML, CSS):

<div class="container-fluid pt-5 pb-5" style="background: #FBF7F0;">

    <div class="container text-center" style="margin-top: 25px;">

        <h3>What our customers say…</h3>

        <p>Transparency is important to us. That’s why we openly share our customers’ feedback. We’ve received feedback from 468 customers on <a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/#ratings" class="badge badge-st-link">ProvenExpert.com</a>. Our average rating is 4,62 out of 5 stars. Here are some of the latest reviews…</p>

        <hr style="margin-bottom: 2.5em;">

        <div style="margin: 0 auto;width: 66%;"><blockquote>
        <p><strong>Very happy</strong>, but sometimes I would have wanted faster support.</p>
        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1N3pjVUpkAUBmMGZjNaA1Z3A2ZwpjWUA" class="badge badge-st-link">A.</a> (4,4/5)</p>

        <span id="pe_stars"> <span style="width: 89%;> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>
        </blockquote>

        <blockquote>
        <p>I already had a few different hosting companies (for webspace, domains, and servers). But I haven’t been as satisfied with any of them as I’m now with Signaltransmitter.</p>

        <p>The team offers <strong>top-quality service</strong> for the price.</p>

        <p>I don’t know even remember how many years I’ve been a customer. But <strong>I recommend them without hesitation!</strong></p>

        <p>5 stars.</p>
        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NKp2R3AhOGp3twA44TAj5JA1ZUp14zZ" class="badge badge-st-link">Daniel F.</a> (5/5)</p>

        <span id="pe_stars"> <span style="width: 100%;> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>
        </blockquote>

        <blockquote>
        <p>vServer: Except for strange, sporadically occurring server loads at actually unused test server <strong>very stable and reliable</strong>. In spite of this small point in total an <strong>excellent performance</strong>.</p>
        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NKp1ZKpk5Jp3twA44JZlSGB2xwo3R3Z" class="badge badge-st-link">Günther F.</a> (4,6/5)</p>

        <span id="pe_stars"> <span style="width: 91%;> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>
        </blockquote>

        <blockquote>
        <p>I switched from a prepaid hoster to Signaltransmitter because those prepaid hosters always had technical problems. And the vServer that I leased didn’t reach the performance level I wanted.</p>

        <p>Everything went smoothly with Signaltransmitter and <strong>the server is performing well</strong>. I had it running around the clock for 3 months without a single crash, that’s <strong>top quality at a great price!</strong></p>

        <p>The customer support was <strong>always friendly and competent</strong>. And even when I forgot to pay the bill, my stored (and valuable) data was not immediately gone but „frozen“ until I was able to make the payment again. <strong>All in all, no flaws!</strong></p>
        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1NaoiAmpjWmAiWaZ5RKAiumA14zAlS3Z" class="badge badge-st-link">Malte S.</a> (4,9/5)</p>

        <span id="pe_stars"> <span style="width: 96%;> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>
        </blockquote>

        <blockquote>
        <p>I recommend you to anyone I talk to about server and webhosting. Keep it up! :)</p>
        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/?shrid=1Nao2ZKBkWmZ5xQZkqGAhWGBlHGZkO3Z" class="badge badge-st-link">Dominic W.</a>&nbsp;(5/5)</p>

        <span id="pe_stars"> <span style="width: 100%;> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>
        </blockquote>

        </div>

        <hr style="margin-top: 2.5em;">

        <p>As a company based in Germany, most of our customers are speaking German. That’s why the reviews were originally written in German, and we translated some of the latest feedback into English.</p><span id="pe_stars"> <span style="width: 90%; -webkit-user-select: auto;"> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span> </span>

        <p><a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/#ratings" class="badge badge-st-link" style="background: #fec905;padding: .25em;color: #17182d;">Read all 468 reviews on ProvenExpert.com</a></p>

        <p><em>…or try us yourself and <a href="https://signaltransmitter.de/en/faq" class="badge badge-st-link">ask questions</a> while getting started</em></p>

    </div>
</div>

I then removed the horizontal line (that was intended to divide the testimonials from one another) because I found another solution: I turned each other testimonial into an obvious box, and I added the ProvenExpert.com star rating with the exact star representation of each testimonial.

I also put all testimonials into a parent div to play with the width of each testimonial box:

<div style="margin: 0 auto;width: 66%;">
    <blockquote>/*…*/</blockquote>
    /*…*/
</div>

Here’s the CSS code for the testimonial boxes (blockquote):

blockquote {
    margin: 0 0 1rem;
    border-left: 3px solid #ddd;
    padding: 1rem 2rem;
    text-align: left;
    font-family: Georgia, serif;
    font-size: 1.125em;
    background: #fff;
    border-radius: 12px;
    display: block;
}

I also changed the font for the testimonials to „Georgia“ to give them a more human touch (like it was said by people) and to be visually different from the regular font family that is used on the site, this one:

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

I did leave the initial CSS code (via ProvenExpert.com) for the star rating intact but to document it, here it is:

#pe_stars {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 5em;
    height: 1.1em;
    margin: 0!important;
    line-height: 1em;
    font-size: 1em;
}

The inline-width of the span element was responsible for the amount of filling of the stars. For example, a 4,4 star-rating resulted in a width of 89%:

<span style="width: 89%;"> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat  </span>

And I changed the color of the stars to match the SIGNALTRANSMITTER brand color. Here is the complete CSS code:

#pe_stars>span:before {
    font-family: ProvenExpertStars,Arial,Helvetica,sans-serif;
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 0;
    color: #fec905;
}

I also added this text at the very bottom:

[Graphic showing the average star rating from ProvenExpert.com]

Button/link: Read all 468 reviews on ProvenExpert.com

…or try us yourself and ask questions while getting started

I gave „Read all 468 reviews on ProvenExpert.com“ the kind of CSS style that an inline-text link would normally receive when you hover it with the mouse. It’s supposed to stand out visually, and it does. And I added a small padding:

<p>
    <a href="https://www.provenexpert.com/en-gb/signaltransmitter-de-hosting/#ratings" class="badge badge-st-link" style="background: #fec905;padding: .25em;color: #17182d;">Read all 468 reviews on ProvenExpert.com</a>
</p>

I’m taking another break and then I’ll tackle rest of the page and the footer.

{taking a break}

Summarizing the benefits of Signaltransmitter

It’s the next day, and I decided to add another section that sums up the benefits of Signaltransmitter customers.

This is the original copy that you used:

[ICON]

DDOS-Protection

All products are protected against DDOS attacks.

[ICON]

Prepaid System

No hidden costs through our pre-paid prepaid system.

[ICON]

Professional support

With us you receive support only from highly trained employees.

[ICON]

IPv6 for free

All products have IPv6 available for free.

[ICON]

Server location

All our host systems are located in a German data center.

[ICON]

Own hardware

With our products we rely exclusively on brand hardware.

[ICON]

Real time order

Your order will be processed automatically after receipt of payment within 60 seconds.

[ICON]

Own customer panel

Our customer system is a complete in-house development.

First, I rewrote the copy to make it sound more appealing (and I changed the order of the copy as well)…

What you get…

You’re safe!

Our servers are protected against denial-of-service (DDoS) attacks. A person running this kind of cyber attack is flooding a server with requests from multiple resources. Their goal is to make an online service temporarily or indefinitely unavailable.

Pay as you go

You pay as much as you pre-pay. No hidden fees. If you have enough credit in your account, you’re fine. And if you forgot to top up, we will keep your data and „freeze“ it until you add sufficient credits.

We’re happy to help

A technical product can be daunting and scary. We know that not everyone is as tech-savvy as we are. And our customers don’t have to be. That’s ok. So, please ask our support team and we will help you friendly and competently.

Fast IPv6 is included!

The Internet Protocol (IP) makes sure that your internet-enabled devices (computer, smartphone, tablet) can talk to each other. No IP no internet. IPv6 is version six of the protocol and the update of IPv4. It’s simpler, faster, and more secure than version four. All our products feature IPv6.

High-quality hardware only

We use hardware from reliable big brands (HP and Supermicro) with Intel processors. They live longer than subpar hardware and endure heavy server loads easier than consumer hardware.

Ready in 1 minute!

After your successful payment, you can access your new server in less than 60 seconds (on average). There can be exceptions, but you will never wait more than a day to run your virtual server.

Easily manage your server

Our custom administration system is tailor-made for people like you. It looks good, works well and makes handling your server a breeze. And it’s a complete in-house development.

Your data is safe in Germany!

As a German hosting company, our host systems are located in German premium data centers. This means your data is safely stored in Germany, protected by top-notch security standards, and covered by German legislation.

I used this original HTML code from your website…

<div class="container-fluid pt-5 pb-5">
    <div class="container text-center">
        <div class="row">
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shield-alt" class="svg-inline--fa fa-shield-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 409.6V100l-142.9 59.5c8.4 116.2 65.2 202.6 142.9 250.1zM466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256 464C158.5 423.4 64 297.3 64 128l192-80 192 80c0 173.8-98.4 297-192 336z"></path></svg><!-- <i class="far fa-shield-alt"></i> -->
                    </div>
                    <h5 class="card-title">DDOS-Protection</h5><p class="card-text">All products are protected against DDOS attacks.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="money-bill" class="svg-inline--fa fa-money-bill fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zm-16 272c-35.35 0-64 28.65-64 64H112c0-35.35-28.65-64-64-64V176c35.35 0 64-28.65 64-64h416c0 35.35 28.65 64 64 64v160zM320 160c-44.18 0-80 42.98-80 96 0 53.01 35.81 96 80 96 44.17 0 80-42.97 80-96 0-53.02-35.82-96-80-96z"></path></svg><!-- <i class="far fa-money-bill"></i> -->
                    </div>
                    <h5 class="card-title">Prepaid System</h5><p class="card-text">No hidden costs through our pre-paid prepaid system.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg><!-- <i class="far fa-envelope"></i> -->
                    </div>
                    <h5 class="card-title">Professional support</h5><p class="card-text">With us you receive support only from highly trained employees.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="globe-europe" class="svg-inline--fa fa-globe-europe fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg=""><path fill="currentColor" d="M178.1 123.7c0-6.2-5.1-11.3-11.3-11.3-3 0-5.9 1.2-8 3.3l-25.4 25.4c-2.1 2.1-3.3 5-3.3 8 0 6.2 5.1 11.3 11.3 11.3h16c3 0 5.9-1.2 8-3.3l9.4-9.4c2.1-2.1 3.3-5 3.3-8v-16zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm175.1 344.4h-13.4c-4.8 0-9.5-1.9-12.9-5.3l-17.3-17.3c-6-6-14.1-9.4-22.6-9.4h-18.3l-43.2-37.1c-8.2-7.1-18.7-10.9-29.6-10.9h-31.2c-8.2 0-16.3 2.2-23.4 6.5l-42.9 25.7c-13.7 8.2-22.1 23-22.1 39v23.9c0 14.3 6.7 27.8 18.2 36.4l22.2 16.7c8.6 6.5 24.6 11.8 35.4 11.8h20.2c8.8 0 16 7.2 16 16v7.1c-3.4.2-6.7.5-10.1.5-110.3 0-200-89.7-200-200 0-108.3 86.7-196.6 194.3-199.7L213.3 78c-2 1.5-3.2 3.9-3.2 6.4v20c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-8l16-16h20.7c6.2 0 11.3 5 11.3 11.3 0 3-1.2 5.9-3.3 8L260 126.5c-1.2 1.2-2.7 2.2-4.4 2.7l-40 13.3c-3.3 1.1-5.5 4.1-5.5 7.6 0 6.6-2.6 12.8-7.2 17.5l-20.1 20.1c-3 3-4.7 7.1-4.7 11.3v25.4c0 8.8 7.2 16 16 16h22.1c6.1 0 11.6-3.4 14.3-8.8l9.4-18.7c1.4-2.7 4.1-4.4 7.2-4.4h3.1c4.4 0 8 3.6 8 8s3.6 8 8 8h16c4.4 0 8-3.6 8-8v-2.2c0-3.4 2.2-6.5 5.5-7.6l31.6-10.5c6.5-2.2 10.9-8.3 10.9-15.2v-4.5c0-8.8 7.2-16 16-16h36.7c6.2 0 11.3 5.1 11.3 11.3v9.4c0 6.2-5.1 11.3-11.3 11.3h-32c-3 0-5.9 1.2-8 3.3l-9.4 9.4c-2.1 2.1-3.3 5-3.3 8 0 6.2 5.1 11.3 11.3 11.3h16c3 0 5.9 1.2 8 3.3l9.4 9.4c2.1 2.1 3.3 5 3.3 8v8.7l-12.5 12.5c-4.6 4.6-4.6 12-.1 16.7l31.9 32.6c3 3.1 7.1 4.8 11.4 4.8h20.3c-3.8 11-8.5 21.7-14.1 31.9z"></path></svg><!-- <i class="far fa-globe-europe"></i> -->
                    </div>
                    <h5 class="card-title">IPv6 for free</h5><p class="card-text">All products have IPv6 available for free.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="map-pin" class="svg-inline--fa fa-map-pin fa-w-9" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512" data-fa-i2svg=""><path fill="currentColor" d="M144 0C64.47 0 0 64.47 0 144c0 71.31 51.96 130.1 120 141.58v197.64l16.51 24.77c3.56 5.34 11.41 5.34 14.98 0L168 483.22V285.58C236.04 274.1 288 215.31 288 144 288 64.47 223.53 0 144 0zm0 240c-52.94 0-96-43.07-96-96 0-52.94 43.06-96 96-96s96 43.06 96 96c0 52.93-43.06 96-96 96zm0-160c-35.28 0-64 28.7-64 64 0 8.84 7.16 16 16 16s16-7.16 16-16c0-17.64 14.34-32 32-32 8.84 0 16-7.16 16-16s-7.16-16-16-16z"></path></svg><!-- <i class="far fa-map-pin"></i> -->
                    </div>
                    <h5 class="card-title">Server location</h5><p class="card-text">All our host systems are located in a German data center.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="server" class="svg-inline--fa fa-server fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 208v96a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 304v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z"></path></svg><!-- <i class="far fa-server"></i> -->
                    </div>
                    <h5 class="card-title">Own hardware</h5><p class="card-text">With our products we rely exclusively on brand hardware.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path></svg><!-- <i class="far fa-shopping-cart"></i> -->
                    </div>
                    <h5 class="card-title">Real time order</h5><p class="card-text">Your order will be processed automatically after receipt of payment within 60 seconds.</p>
                </div>
            </div>
            <div class="card text-center no-bg col-md-3">
                <div class="card-body">
                    <div class="card-icon">
                        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="browser" class="svg-inline--fa fa-browser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM48 92c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V92zm416 334c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V168h416v258zm0-310c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12V92c0-6.6 5.4-12 12-12h280c6.6 0 12 5.4 12 12v24z"></path></svg><!-- <i class="far fa-browser"></i> -->
                    </div>
                    <h5 class="card-title">Own customer panel</h5>
                    <p class="card-text">Our customer system is a complete in-house development.</p>
                </div>
            </div>
        </div>
    </div>
</div>

…and I amended it the following way (especially by giving each feature twice the width):

<div class="container-fluid pt-5 pb-5">
    <div class="container text-center" style="margin-top: 25px;">
        <h3>What you get…</h3>
        <div class="container text-center">
            <div class="row">
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shield-alt" class="svg-inline--fa fa-shield-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 409.6V100l-142.9 59.5c8.4 116.2 65.2 202.6 142.9 250.1zM466.5 83.7l-192-80a48.15 48.15 0 0 0-36.9 0l-192 80C27.7 91.1 16 108.6 16 128c0 198.5 114.5 335.7 221.5 380.3 11.8 4.9 25.1 4.9 36.9 0C360.1 472.6 496 349.3 496 128c0-19.4-11.7-36.9-29.5-44.3zM256 464C158.5 423.4 64 297.3 64 128l192-80 192 80c0 173.8-98.4 297-192 336z"></path></svg><!-- <i class="far fa-shield-alt"></i> -->
                        </div>
                        <h5 class="card-title">You’re safe!</h5><p class="card-text">Our servers are protected against denial-of-service (DDoS) attacks. A person running this kind cyber attack is flooding a server with requests from multiple resources. Their goal is to make an online service temporarily or indefinitely unavailable.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="money-bill" class="svg-inline--fa fa-money-bill fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M608 64H32C14.33 64 0 78.33 0 96v320c0 17.67 14.33 32 32 32h576c17.67 0 32-14.33 32-32V96c0-17.67-14.33-32-32-32zm-16 272c-35.35 0-64 28.65-64 64H112c0-35.35-28.65-64-64-64V176c35.35 0 64-28.65 64-64h416c0 35.35 28.65 64 64 64v160zM320 160c-44.18 0-80 42.98-80 96 0 53.01 35.81 96 80 96 44.17 0 80-42.97 80-96 0-53.02-35.82-96-80-96z"></path></svg><!-- <i class="far fa-money-bill"></i> -->
                        </div>
                        <h5 class="card-title">Pay as you go</h5><p class="card-text">You pay as much as you pre-pay. No hidden fees. If you have enough credit in your account, you’re fine. And if you forgot to top up, we will keep your data and „freeze“ it until you add sufficient credits.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path></svg><!-- <i class="far fa-envelope"></i> -->
                        </div>
                        <h5 class="card-title">We’re happy to help</h5><p class="card-text">A technical product can be daunting and scary. We know that not everyone is as tech-savvy as we are. And our customers don’t have to be. That’s ok. So, please ask our support team and we will help you friendly and competently.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="globe-europe" class="svg-inline--fa fa-globe-europe fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg=""><path fill="currentColor" d="M178.1 123.7c0-6.2-5.1-11.3-11.3-11.3-3 0-5.9 1.2-8 3.3l-25.4 25.4c-2.1 2.1-3.3 5-3.3 8 0 6.2 5.1 11.3 11.3 11.3h16c3 0 5.9-1.2 8-3.3l9.4-9.4c2.1-2.1 3.3-5 3.3-8v-16zM248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm175.1 344.4h-13.4c-4.8 0-9.5-1.9-12.9-5.3l-17.3-17.3c-6-6-14.1-9.4-22.6-9.4h-18.3l-43.2-37.1c-8.2-7.1-18.7-10.9-29.6-10.9h-31.2c-8.2 0-16.3 2.2-23.4 6.5l-42.9 25.7c-13.7 8.2-22.1 23-22.1 39v23.9c0 14.3 6.7 27.8 18.2 36.4l22.2 16.7c8.6 6.5 24.6 11.8 35.4 11.8h20.2c8.8 0 16 7.2 16 16v7.1c-3.4.2-6.7.5-10.1.5-110.3 0-200-89.7-200-200 0-108.3 86.7-196.6 194.3-199.7L213.3 78c-2 1.5-3.2 3.9-3.2 6.4v20c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-8l16-16h20.7c6.2 0 11.3 5 11.3 11.3 0 3-1.2 5.9-3.3 8L260 126.5c-1.2 1.2-2.7 2.2-4.4 2.7l-40 13.3c-3.3 1.1-5.5 4.1-5.5 7.6 0 6.6-2.6 12.8-7.2 17.5l-20.1 20.1c-3 3-4.7 7.1-4.7 11.3v25.4c0 8.8 7.2 16 16 16h22.1c6.1 0 11.6-3.4 14.3-8.8l9.4-18.7c1.4-2.7 4.1-4.4 7.2-4.4h3.1c4.4 0 8 3.6 8 8s3.6 8 8 8h16c4.4 0 8-3.6 8-8v-2.2c0-3.4 2.2-6.5 5.5-7.6l31.6-10.5c6.5-2.2 10.9-8.3 10.9-15.2v-4.5c0-8.8 7.2-16 16-16h36.7c6.2 0 11.3 5.1 11.3 11.3v9.4c0 6.2-5.1 11.3-11.3 11.3h-32c-3 0-5.9 1.2-8 3.3l-9.4 9.4c-2.1 2.1-3.3 5-3.3 8 0 6.2 5.1 11.3 11.3 11.3h16c3 0 5.9 1.2 8 3.3l9.4 9.4c2.1 2.1 3.3 5 3.3 8v8.7l-12.5 12.5c-4.6 4.6-4.6 12-.1 16.7l31.9 32.6c3 3.1 7.1 4.8 11.4 4.8h20.3c-3.8 11-8.5 21.7-14.1 31.9z"></path></svg><!-- <i class="far fa-globe-europe"></i> -->
                        </div>
                        <h5 class="card-title">Fast IPv6 is included!</h5><p class="card-text">The Internet Protocol (IP) makes sure that your internet-enabled devices (computer, smartphone, tablet) can talk to each other. No IP no internet. IPv6 is version six of the protocol and the update of IPv4. It’s simpler, faster, and more secure than version four. All our products feature IPv6.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="server" class="svg-inline--fa fa-server fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M424 400c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24zm-88-24c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm64-144c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm176-72a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 208v96a47.758 47.758 0 0 1-6.438 24A47.758 47.758 0 0 1 512 352v96c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 304v-96a47.758 47.758 0 0 1 6.438-24A47.758 47.758 0 0 1 0 160V64c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v96zm-464 0h416V64H48v96zm416 48H48v96h416v-96zm0 144H48v96h416v-96zm-64-216c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24zm-64 0c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24z"></path></svg><!-- <i class="far fa-server"></i> -->
                        </div>
                        <h5 class="card-title">High-quality hardware only</h5><p class="card-text">We use hardware from reliable big brands (HP and Supermicro) with Intel processors. They live longer than subpar hardware and endure heavy server loads easier than consumer hardware.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path></svg><!-- <i class="far fa-shopping-cart"></i> -->
                        </div>
                        <h5 class="card-title">Ready in 1 minute!</h5><p class="card-text">After your successful payment, you can access your new server  in less than 60 seconds (on average). There can be exceptions, but you will never wait more than a day to run your virtual server.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="browser" class="svg-inline--fa fa-browser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM48 92c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V92zm416 334c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V168h416v258zm0-310c0 6.6-5.4 12-12 12H172c-6.6 0-12-5.4-12-12V92c0-6.6 5.4-12 12-12h280c6.6 0 12 5.4 12 12v24z"></path></svg><!-- <i class="far fa-browser"></i> -->
                        </div>
                        <h5 class="card-title">Easily manage your server</h5>
                        <p class="card-text">Our custom administration system is tailor-made for people like you. It looks good, works well and makes handling your server a breeze. And it’s a complete in-house development.</p>
                    </div>
                </div>
                <div class="card text-center no-bg col-md-6">
                    <div class="card-body">
                        <div class="card-icon">
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="map-pin" class="svg-inline--fa fa-map-pin fa-w-9" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512" data-fa-i2svg=""><path fill="currentColor" d="M144 0C64.47 0 0 64.47 0 144c0 71.31 51.96 130.1 120 141.58v197.64l16.51 24.77c3.56 5.34 11.41 5.34 14.98 0L168 483.22V285.58C236.04 274.1 288 215.31 288 144 288 64.47 223.53 0 144 0zm0 240c-52.94 0-96-43.07-96-96 0-52.94 43.06-96 96-96s96 43.06 96 96c0 52.93-43.06 96-96 96zm0-160c-35.28 0-64 28.7-64 64 0 8.84 7.16 16 16 16s16-7.16 16-16c0-17.64 14.34-32 32-32 8.84 0 16-7.16 16-16s-7.16-16-16-16z"></path></svg><!-- <i class="far fa-map-pin"></i> -->
                        </div>
                        <h5 class="card-title">Your data is safe in Germany!</h5><p class="card-text">As a German hosting company, our host systems are located in German premium data centers. This means your data is safely stored in Germany, protected by top-notch security standards, and covered by German legislation.</p>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</div>

The result is pleasing and it looks less cramped than it did before when four icons were aligned in one row. Now it’s only two. And the copy is more meaningful.

Now the only that’s missing is a call to action. This one…

Button: Still unsure? Ask :)

Here’s the HTML code of the button I used:

<button class="btn btn-st mt-3">
    <a href="https://signaltransmitter.de/en/faq" style="color: #000;">Still unsure? Ask :)</a>
</button>

I’m happy with how it looks and feels, and I’m taking a bio break.

{taking a break}

Optimizing the footer

The break is over. Time to make the footer as pleasing as can be.

I removed the ProvenExpert.com rating and the text „468 Bewertungen auf ProvenExpert.com“, also because it’s written in German on an English site where there should be no German text.

The text I removed:

<a id="pe_rating" xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate" title="Kundenbewertungen &amp; Erfahrungen zu SIGNALTRANSMITTER.de - Hosting. Mehr Infos anzeigen." target="_blank" href="https://www.provenexpert.com/signaltransmitter-de-hosting/" class="pe_g pe_l"> <span id="pe_stars"> <span style="width: 90%; -webkit-user-select: auto;"> <span property="v:itemreviewed">SIGNALTRANSMITTER.de - Hosting</span> hat <span rel="v:rating"><span property="v:value">4,62</span> von <span property="v:best">5</span> Sternen |</span> </span> </span> <span class="pe_u"> <span property="v:count">468</span> Bewertungen auf ProvenExpert.com </span> </a>

What I’m seeing now is a mixture of being „wild“ and lacking love, and I’m seeing links to important subpages…

Prepaid System
Status Page
Privacy Policy
TOS
Imprint
Whois-Query

…social media links…

Facebook
Twitter
Instagram

…a variety of logos that represent payment methods…

Klarna
Barzahlen
PayPal
paysafecard
Bitcoin

…and then three logos that I don’t know (something about „accredited registrar“)…

RIPE NCC
EURid
nic.at

…and this copytext:

© 2019 LimeNet GmbH | signaltransmitter.de

All prices include 19% VAT applicable to the Federal Republic of Germany.

I’m trying to make sense of it because a) especially the payment method logos are hard to recognize and b) all of the logos seem to be thrown onto the page without much care.

First of all, I’m rewriting the copy of the links to the sub-pages:

Pay as you go RE/MOVED
Status Page RE/MOVED
Privacy policy (German)
Terms of use (German)
Imprint (German)
Tool: Whois domain query

I start thinking about whether „Pay as you go“ is the right term. I want to say that after your initial payment you can use the service and then continue using it if you always keep your credit topped up. So, maybe there is a better way to say it. According to Collins „Pay-as-you-go is a system in which a person or organization pays for the costs of something when they occur rather than before or afterward.“ So, for now, I’m sticking to „Pay as you go“ because it’s at least partially true for the payment system that SIGNALTRANSMITTER is offering.

In fact, I deleted the link to the payment system page and added it to the section above:

You can pay with Klarna, Barzahlen, PayPal, paysafecard, or Bitcoin.

The whole paragraph is:

You pay as much as you pre-pay. No hidden fees. If you have enough credit in your account, you’re fine. And if you forgot to top up, we will keep your data and „freeze“ it until you add sufficient credits. Pay with Klarna, Barzahlen, PayPal, paysafecard, or Bitcoin.

Then I wanted to apply the link style that I used before: yellow text, set in bold and when hovered over the text turns into black with a yellow background. But when I saw a simple underlined text link, it worked much better and it’s more legible than yellow text on a white background. I will update all other inline text links as well later.

Back to the footer…

I removed all those payment icons that were hard to recognize, and I mentioned them in the „Pay as you go“ paragraph anyway:

<div id="payments" class="text-center">
    <img src="/fileadmin/st_template/img/payments/sofort.png" alt="Klarna Logo">
    <img src="/fileadmin/st_template/img/payments/barzahlen.png" alt="Barzahlen Logo">
    <img src="/fileadmin/st_template/img/payments/pp.png" alt="PayPal Logo"><img src="/fileadmin/st_template/img/payments/paysafecard.png" alt="paysafecard Logo">
    <img src="/fileadmin/st_template/img/payments/bitcoin.png" alt="Bitcoin Logo">
</div>

I then removed the „Status Page“ link because it’s obsolete. Because of the changes I made you can see the system status on top of each page and it’s a link as well.

To the following three sub-page links I added German in brackets to make clear that they’re not written in English. I also wrote „Terms of use“ instead of „TOS“ to make it more understandable.

Generally speaking, I don’t understand why you would want to add links to German subpages from a page written in English. Makes no sense to me.

So, I did what made sense to me. I eventually removed all three links (Privacy policy, Terms of use, Imprint):

<div class="col-md-4">
    <ul style="list-style-type: none;>
        <li><a href="/en/privacy-policy">Privacy policy (German)</a></li>
        <li><a href="/en/tos">Terms of use (German)</a></li>
        <li><a href="/en/imprint">Imprint (German)</a></li>
    </ul>
</div>

No English speaker would want to read a German page. It’s killing the experience for them.

I thought about deleting the whois domain query tool but it could be useful for some visitors. Yet, when I saw it being the only link in the footer, I decided to move the link up into the 2nd-level top menubar. This is the footer code I removed:

<div class="col-md-4">
    <ul style="list-style-type: none;>
        <li style="">
            <a href="/en/whois">Tool: Whois domain query</a>
        </li>
    </ul>
</div>

Moving along with the footer…

The three social media links, the three „accredited registrar“ links, and the footer text were left.

I’m splitting the space of the social media icons and the „accredited registrar“ icons into 50% each.

I’m also doubling the size of the social media icons and quadrupling their in-between-margin…

#social-media a {
    font-size: 56px;
    margin: 0 20px;
    /*…*/
}

…and I’m adding this sub-headline to give these icons a voice:

Talkative? We too.

Here’s the HTML code:

<h3 style="text-align: center;">Talkative? We too.</h3>

And I gave the footer a smaller inner top-padding:

<footer class="bg-st-blue container-fluid pt-5 pb-1" style="padding-top: 2em;">/*…*/</footer>

In order to apply the 2em top padding, I had to remove the !important notation from this CSS class:

.pt-5, .py-5 {
    padding-top: 3rem /* !important */;
}

This is the HTML code for the social media icons part of the footer:

<div class="col-md-6"><h3 style="text-align: center;">Talkative? We too.</h3>
    <div class="text-center mb-3" id="social-media">
        <a href="https://www.facebook.com/signaltransmitter/" target="_blank" rel="nofollow" class="facebook">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                <path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
            </svg>
            <!-- <i class="fab fa-facebook-square"></i> -->
        </a>
        <a href="https://twitter.com/SThosting" target="_blank" rel="nofollow" class="twitter">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
            </svg>
            <!-- <i class="fab fa-twitter"></i> -->
        </a>
        <a href="https://www.instagram.com/signaltransmitter/" target="_blank" rel="nofollow" class="instagram">
            <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                <path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
            </svg>
            <!-- <i class="fab fa-instagram"></i> -->
        </a>
    </div>
</div>

And now the final element of the footer… the „accredited registrar“ icons.

I increased the size of the „RIPE NCC“ logo and diminished its margin-top to 0px.

<img src="/fileadmin/st_template/img/logos/ripe.svg" alt="RIPE NCC Logo" height="100px" style="margin-top: 0px;>

I then turned the existing HTML code…

<div class="col-md-6 text-center">
    <img src="/fileadmin/st_template/img/logos/ripe.svg" alt="RIPE NCC Logo" height="100px" style="margin-top: 0px;>
    <img src="/fileadmin/st_template/img/logos/eurid.svg" alt="EURid Logo" height="60px" style="margin-right: 20px;>
    <img src="/fileadmin/st_template/img/logos/nicat.png" alt="nic.at Logo" height="60px">
</div>

…into a proper format (unordered list):

<div class="col-md-6 text-center">
    <ul>
        <li><img src="/fileadmin/st_template/img/logos/ripe.svg" alt="RIPE NCC Logo" height="100px"></li>
        <li><img src="/fileadmin/st_template/img/logos/eurid.svg" alt="EURid Logo" height="60px"></li>
        <li><img src="/fileadmin/st_template/img/logos/nicat.png" alt="nic.at Logo" height="60px"></li>
    </ul>
</div>

Then I adjusted the inline-CSS style and the size of each icon:

<div class="col-md-6 text-center">
    <ul style="list-style: none;padding-inline-start: 0px;margin-block-start: 0px;">
        <li style="display: inline-block;margin: auto 1em 0 auto;"><img src="/fileadmin/st_template/img/logos/ripe.svg" alt="RIPE NCC Logo" height="100px"></li>

        <li style="display: inline-block;margin: auto 1em 0 auto;"><img src="/fileadmin/st_template/img/logos/eurid.svg" alt="EURid Logo" height="64px"></li>

        <li style="display: inline-block;margin: auto 1em 0 .5em;"><img src="/fileadmin/st_template/img/logos/nicat.png" alt="nic.at Logo" height="70px"></li>
    </ul>
</div>

And I added a sub-headline that fits the casual written voice that I used on the page:

…and we’re accredited.

Here’s the HTML code:

<div class="col-md-6 text-center">
    <h3 style="text-align: center;">…and we’re accredited.</h3>
    <ul style="list-style: none;padding-inline-start: 0px;margin-block-start: 0px;">

        <li style="display: inline-block;margin: auto 1em 0 auto;"><img src="/fileadmin/st_template/img/logos/ripe.svg" alt="RIPE NCC Logo" height="100px"></li>

        <li style="display: inline-block;margin: auto 1em 0 auto;"><img src="/fileadmin/st_template/img/logos/eurid.svg" alt="EURid Logo" height="64px"></li>

        <li style="display: inline-block;margin: auto 1em 0 .5em;"><img src="/fileadmin/st_template/img/logos/nicat.png" alt="nic.at Logo" height="70px"></li>
    </ul>
</div>

Now I gave the very-bottom text more margin, like this:

<p class="text-center mt-3" style="margin-top: 3rem;">© 2019 LimeNet GmbH | signaltransmitter.de</p>

<p class="small text-center text-muted" style="margin-bottom: 4em;">All prices include 19% VAT applicable to the Federal Republic of Germany.</p>

But I had to remove the !important notation again, this time from this class:

.mt-3, .my-3 {
    margin-top: 1rem /* !important */;
}

Last but not least… fine-tuning (the little things)

There were small things that slightly annoyed me during the analysis but I put them on the back burner. Now, I’m addressing these tiny bits, and I’m starting at the very top of the page.

You don’t need two links pointing to the home page

The SIGNALTRANSMITTER logo and „Home“ both link to the home page. That’s why „Home“ can be removed. It’s become an established usage paradigm that when you click the logo you will get to the home page as Jacob Nielsen stated in 2011. Though there is still discussion about it in the community.

So, if you decide to leave the „Home“ element intact (which I do not recommend because your logo is the implicit „Home“ element) in the menu bar at least make it non-clickable when the visitor is on the home page at the moment.

I removed the „Home“ element:

<ul class="navbar-nav mr-auto" >
    <li class="nav-item active">
        <a href="/en/" class="nav-link" ><!-- <i class="fas fa-home" ></i> --> Home</a>
    </li>
</ul>

I also removed the anchor link from the SIGNALTRANSMITTER logo because I’m on the homepage, I don’t need a self-referential link. Here’s the code with an anchor element…

<a href="/en/" class="navbar-brand" style="-webkit-user-select: auto;"><img src="/fileadmin/st_template/img/logo.png" height="40" alt="signaltransmitter.de Logo"></a>

…and here’s the code without the anchor element:

<img src="/fileadmin/st_template/img/logo.png" height="40" alt="signaltransmitter.de Logo" class="navbar-brand">

I added class="navbar-brand" to the img element and it made the logo smaller which was a surprising but good accident. The SIGNALTRANSMITTER logo is relatively bulky in width, so that’s ok. And even with it smaller dimension with around 40px height it’s still legible and it preserves its eye-catching dominance somehow.

Here’s the .navbar-brand CSS code that was originally assigned to the anchor element (the anchor that I just removed but attached to the img element again):

.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

I’m now giving each menubar element more left and right margin to let them breathe:

.navbar .nav-item .nav-link {
    padding: 0 .65em;
}

Changing the order of the menubar because… storytelling

If you meet someone you introduce yourself. You say who you are, what you are about and then you talk about what you do. Why not apply that to your landing page?

Start with the „About“ page. That’s why I moved the „About“ link in the menu bar to the very left.

Then show what matters to you, what kind of world you’re in. So, I moved the „Blog“ link next to „About“.

Then show your core offer (Domains, Hosting, Server), and if the visitor is still unsure, your FAQ page will answer all his questions and kill doubt. Or it will lead him to take action in the form contacting your customer support.

Language switcher… make what you can click most obvious

I’m on the English page but for some reason…

…the „EN“ link (color #17182d) is better visible than the „DE“ link (text color #999).
…the „EN“ link is clickable although I’m on the English page.

That’s why I’m setting the text of the „DE“ link in bold, adding an underline, and applying a text color of #000 instead of #999:

HTML:

<a href="/" class="lang-link" hreflang="de-DE" style="font-weight: bold;text-decoration: underline;">DE</a>

CSS:

.lang-link {
    color: #000 !important;        
}

And I removed the anchor element from the „EN“ text.

Before:

<span class="lang-link-active"><a href="/en/" class="lang-link" hreflang="en-US">EN</a></span>

After:

<span class="lang-link-active" style="font-size: 15px;">EN</span>

I added font-size: 15px; because the font-size was „gone“ after I had removed the anchor element.

To make the whole top-level menubar elements super obvious links, I added an underline to the other two menu elements on the right-hand side…

24/7 Support:

<span class="d-none d-md-inline" style="text-decoration: underline;">24/7 Support</span>

<span class="d-none d-md-inline" style="text-decoration: underline;">Login</span>

The result works.

The final touch… yellow inline links turn black

I initially thought it was a good idea to give inline links like „Get a .com at 11,64 €.“, „pick a webspace“ or „protect your website“ a yellow text color with bold formatting. But legibility was always a concern.

That’s why I’m turning these links into black and I’m adding an underline as well. For example…

Before:

<a href="https://signaltransmitter.de/en/com-domain" class="badge badge-st-link">Get a .com at 11,64 €.</a>

After:

<a href="https://signaltransmitter.de/en/com-domain">Get a .com at 11,64 €.</a>

And I added a border-bottom-color to anchor elements in general:

a {
    border-bottom: 1px solid #17182d;
}

I repeated this technique to each inline text link.

The only side effect was an added bottom border for the menu bar which I fixed with this CSS code:

#titlebar a {
    /*…*/
    border-bottom: none;
}

An exception was the „Most customers trust this SSL certificate (last step)“ section where I had to change to link color and border-bottom-color:

.bg-st-blue a {
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid #fff;
}

Then I removed the unnecessary border-bottom colors, for example, in a button or below a social media icon in the footer. While doing so I realized that I didn’t have to remove the border color in a button. I only had to use a different button that was inside the HTML code already.

Before (with a border-bottom issue):

<button class="btn btn-st mt-3" style="-webkit-user-select: auto;"><a href="https://cp.signaltransmitter.de/en/cart/addToCart/682?_setLocale=1" style="color: #000;">Get your large webspace</a>
</button>

Before (without a border-bottom issue):

<a href="https://cp.signaltransmitter.de/en/cart/addToCart/682?_setLocale=1" class="btn btn-st" style="-webkit-user-select: auto;"><!-- <i class="far fa-shopping-cart" style="-webkit-user-select: auto;"></i> -->Get your large webspace</a>

It was the same button I had used in the hero unit with the „Get your LXC server“ call-to-action text.

So, I applied the same technique to all other buttons with the border-bottom „problem“.

„Choose our most-trusted SSL encryption“ was another exception where I had to manually change the color to black from white:

<a href="https://cp.signaltransmitter.de/en/cart/addToCart/578?_setLocale=1" class="btn btn-st" style="color: #000;border-bottom: none;"><!-- <i class="far fa-shopping-cart"></i> -->Choose our most-trusted SSL encryption</a>

Fine. Looking good. And polished.

Now the final-final-final step.

I didn’t forget about it… the „Whois domain query“ tool

I’m adding „Tools“ to the top menu bar and the new submenu element „Whois Look-up“. I can do that because the „Home“ menu element is gone and a tool like that on top is more practical than a second element leading „home“.

The HTML code I added was…

<li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><!-- <i class="fas fa-server"></i> -->Tools</a>
    <ul class="dropdown-menu">
        <li class="nav-item">
            <a href="/en/whois" class="nav-link"><!-- <i class="fal fa-rocket"></i> -->Whois Look-up</a>
        </li>
    </ul>
</li>

It’s nice for a visitor to see tools on a page. Tools increase engagement and make the person stay longer. I encourage you to develop more tools like that because they can help your business.

That’s it… it’s the final result.

I’m taking another break because it’s Friday night and late already. Tomorrow I’ll write the conclusion, last thoughts and I will review what I’ve written so I can send it to Andreas.

Conclusion and final thoughts

Quite a journey, I tell you that.

I didn’t anticipate this mountain of work. And if I had known before, my motivation would have been pretty low, I believe.

Andreas has an overall okay-designed site. It’s a tech site and it looks like that. Which is good. But the problem is when a site doesn’t speak anymore when there’s only transaction going on and no connection. With the amendments I did I hope to have removed them.

In terms of moving up the ladder of the buyer’s journey (from step 1 to step 2)… I don’t see how SIGNALTRANSMITTER did provide something valuable to me. Nothing really communicated on the site. It’s dead, lifeless. Yes, there’s a body but where’s the blood and flesh of it. It’s only bones. And I’m not even talking about a soul or a voice.

If you want readers to care about you, care first by showing it through your design and copywriting choices. It’s not what you say (I believe you have a great offer, excellent customer service, and good intentions) but how you say. And this „how“ is what I addressed and hopefully fixed as part of this analysis.

Downloads

Keep in mind that this is not a final design because nothing on the web is final. But it’s a first approach to make the site work better, look better and feel better.

Please also note that some copy text in the screenshots can differ from the text you’ve been reading here. This can happen when I did the last screenshot before I made the final changes to the text. The latest version of the text is the one you’ve been reading here.

Graphics

Visual showing 3+1 simple steps to get started as a new customer

Screenshots:

Thanks for reading, I appreciate your attention.

Alex :)

Statistics:

~7.400 words
~37 minutes reading time
29 hours and 50 minutes to write the analysis

If you’d like your own landing page to be analyzed, follow my 1-step process.

served by naii.io