[How-To] Facebook Layout kopieren

[How-To] Facebook Layout kopieren

Wie man Designs kopiert...

Vorweg, es geht hier nur um Inspiration und das technische. Diebstahl geistigen Eigentums, dazu gehört auch das (1:1) Kopieren von Layouts, ist strafbar.

Warum das ganze?

Ganz einfach, es ist interessant und lehrreich. Wenn man Dinge "kopiert" lernt man neue Techniken, man strengt sich besonders an und hat sein Ziel, im wahrsten Sinne des Wortes, vor Augen. Man muss sich nur professionelle Fälscher angucken, die Antike Wertgegenstände kopieren. Es braucht enorme Fähigkeiten und Talent um beispielsweise die Mona Lisa so zu kopieren, dass sie kaum von der echten zu unterscheiden ist. Man kann sich streiten ob das fälschen nicht selbst eine Kunst ist. Aber das ist ein anderes Thema.

Analyse

Das Facebook Layout/Design ist sehr simpel aufgebaut. Oben ist eine Leiste mit Logo und Profilfunktionen, die immer sichtbar ist. An den Seiten links und rechts befinden sich zwei Inhalt Boxen, welche ebenfalls permanent sichtbar sind, zumindest in der Desktop Version. In der Mitte sieht man die Timeline, die das einzige scrollbare Element ist. Simpel aber trotzdem ein sehr gutes benutzerfreundliches Layout.

Es folgt die Kopie...

Das Basislayout ist einfacher zu realisieren als man vermutet. Es benötigt nicht viele HTML Elemente.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="bar"></div>
        <div class="main">
            <div class="left">
                <div>Test</div>
            </div>
            <div class="timeline">
                <div class="right">
                    <div>Test</div>
                </div>
                <div>Test 1</div>
                <div>Test 2</div>
                <div>Test 3</div>
            </div>
        </div>
    </body>
</html>

Erst wird das Stylesheet mit dem Layout verbunden. Dann folgt ein Bar Container und ein Main Container. Im Main Container sind die Linke Bar und die Timeline. Die rechte Bar ist im Timeline Container, damit die Breite der Timeline beachtet wird und die Positionierung mit fixed stimmt. Alles andere sind Test Boxen und das Standard HTML Gerüst.

Vielleicht auch interessant
Blog programmieren - in 15 Minuten
Blog programmieren - in 15 Minuten

Von Null: Einen einfachen Blog innerhalb kürzester Zeit entwickeln. Mit HTML, CSS & PHP.

Das dazugehörige CSS Stylesheet ist auch relativ einfach zu realisieren.

* {
    margin: 0px;
}

body {
    background: #e9ebee;
}

.bar {
    **position: fixed;
    background: rgb(66, 103, 178);
    height: 45px;
    width: 100%;
    z-index: 999;
    top: 0;
}

.main {
    width: 1024px;
    margin: 0px auto;
    margin-top: 58px;
}

.left {
    **position: fixed;
}

.right {
    **position: fixed;
    margin-left: 512px;
    width: 310px;
}

.right > div {
    margin-bottom: 12px;
    min-height: unset !important;
}

.timeline {
    margin-left: 200px;
    width: 500px;
}

.timeline > div:not(.right), .timeline > .right > div {
    border: 1px solid rgb(220, 220, 220);
    background: rgb(255, 255, 255);
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 12px;
    min-height: 250px;
}

So sieht der jetzige Stand aus. position: fixed; ist hier übrigens der Schlüssel um dafür zu sorgen, dass sich die jeweiligen Elemente beim scrollen mitbewegen.

Nächste Seite
Zweite Element Ebene
Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text