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?

[Robert B.]

Moin,

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?

Schau dir mal bitte den head der genannten Seiten an:

<head>
    <title>
        Aktienmathematik
    </title>
    <meta charset="UTF-8"/>
    <meta name="author" content="Christopher">
    <link rel="stylesheet" href="style.css"/>
	
    <div id="mbmcookie">
	    <a onclick="zugestimmt()" class="button">Einverstanden</a>
	    <p class="cookiemessage">Diese Website nutzt Cookies und Google Analytics. Durch die Nutzung dieser Webseite erkl&auml;ren Sie sich damit einverstanden.
	    <a href="/datenschutz">Mehr erfahren</a></p>
    </div>
	<script type="text/javascript" src="cookiehinweis.js"></script>

    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>

</head>

• Der title ist auf jeder Seite gleich.
• Die Meta-Angabe zum Viewport fehlt (bei den anderen Seiten steht sie übrigens außerhalb des head).
• Innerhalb des head befindet sich ein div mit Kindelementen.

Viele Grüße
Robert

[hmm]

Danke! Habs gerade geändert.

Wenn ich per DOM Texte mit Umlauten ans HTML hänge, werden die Umlaute leider nicht dargestellt. Wie ändert man sowas?

Beispiel:

          var text = document.createTextNode("üöä");

            document.getElementById("result").appendChild(text);

Hast du noch weitere Verbesserungsvorschläge?

[Rolf B]

Hallo hmm,

wenn Umlaute nicht passen, dann stimmt das Encoding des Browsers (dem Du UTF-8 vorgegeben hast) nicht mit dem Encoding überein, das dein Editor verwendet. Speichere deine Quellen als UTF-8, dann sollte es funktionieren. Wenn dein Editor das nicht kann, dann gib im HTML head das Encoding an, das Du auch auslieferst.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Speichere deine Quellen als UTF-8 […] Wenn dein Editor das nicht kann,

dann verwende einen anderen Editor! Software, die nicht Unicode-fähig ist, ist prähistorisch und hat in unserer Zeit nichts zu suchen.

LLAP 🖖