Mein dritter Versuch einer Webseite

[hmm]

Hi Leute,

ich habe jetzt meinen dritten Versuch einer eigenen Webseite gestartet (ein VaR Rechner per GARCH Modell):

http://aktienmathematik.de/

Falls ihr euch an meine anderen beiden Versuche erinnert: Skillmatrixtool und Plativa, bei beiden Versuchen habe ich zuviel aufeinmal implementiert und hatte dadurch unwartbaren Code. Meinen 3. Versuch habe ich mit Wartbaren Code gebacken gekriegt (einschließlich einer guten Abdeckung mit UnitTests).

Wenn ich die Seite im Browser öffne und das Fenster minimiere, so sind alle Seiten Responsive, öffne ich die Seite auf dem Smartphone, so ist die Datenschutzseite und die Kontaktseite leider nicht responsive. Woran liegt das?

Umgesetzt habe ich das (wie mir in diesem Forum angeraten wurde) nicht mit Bootstrap sondern mit einem selbstgeschriebenen CSS File:

body{
    font-family: Roboto, sans-serif;
    font-size:16px;
    font-weight: 300;
    line-height: 1.5em;
    margin: 0;
    min-height: 130em;
}

header, footer, main, article{
    padding: 0% 10%;
}

header{
    border-top: 4px solid #333;
    background-color: #333;
    color: #FFFFFF;
}

title {
    text-align: left;
}

li {
    display: inline;
    list-style-type: none;
}

table {
    width: 100%;
}

td {
    text-align: center;
    vertical-align: middle;
}

@media only screen and (max-width: 600px) {
    header, footer, main, article{
        padding: 0% 0%;
    }
}

.icon {
    background-color: #4CAF50;
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 6px;
    vertical-align: middle;
}

.icon:before{
    content: '+';
    color: white;
}

.topnav {
    overflow: hidden;
    background-color: #333;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav a {display: none;}
    .topnav a.icon {
        float: left;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

#suche {
    width: 10em;
    border: 2px solid #999;
    border-radius: 0.5em;
    font-size: 1.2em;
    transition: width 0.5s ease-in-out;
}

#suche:focus {
    font-size: 1.5em;
    width: 50%;
}

.delete_ {
    background-color: #4CAF50;
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 6px;
    vertical-align: middle;
}

.delete_:before {
    content: 'x';
    color: white;
}

.button {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background-color: #4CAF50;
}

.anzahl_feld {
    width: 5em;
    border: 2px solid #999;
    border-radius: 0.5em;
    font-size: 1.2em;
}

#mbmcookie {position: fixed; bottom: 0; left: 0; right: 0; background: #eee; padding: 20px; font-size: 14px; font-family: verdana;}

#mbmcookie a.button {cursor: pointer; background: #ccc; padding: 8px 20px; margin-left: 10px; border-radius: 5px; font-weight: bold; float: right;}

#mbmcookie a.button:hover {background-color: #aaa;}

#mbmcookie p.cookiemessage {display: block; padding: 0; margin: 0;}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "Wertpapier"; }
    td:nth-of-type(2):before { content: "Anzahl"; }
    td:nth-of-type(3):before { content: "Loeschen"; }
}

Ich bin am überlegen, ob ich das GARCH Modell auf der Seite Beschreiben sollte, da es aber gute Quellen im Internet gibt die das bereits sehr gut beschreiben, weiß ich nicht ob das Sinnvoll wäre. Fallen euch ein paar Sachen an der Seite auf die ich Verbessern könnte? (Um ein SSL Zertifikat kümmer ich mich gerade.)

Welche Strategien zum erhöhen der Besucheranzahl gibt es? Reicht es aus, eine Seite bei Google zu registrieren und dann einfach stetig qualitativen Content zuzufügen,oder muss man mehr tun um eine Seite bekannt zu machen?