Mit Liebe zum Feinen - Partnerseite feinfineart.de online

Juhu, jetzt ist auch die Seite unserer Kollegin Maya Philine Henze online. Sie steckt hinter feinfineart. Das passt – auch zu ihren Designs mit viel Liebe zum Feinen :) Hand in Hand haben wir ihr eine wirklich schöne Seite entwickelt. Das Design stammt aus ihrer eigenen Feder und wir haben es umgesetzt.

Zur Umsetzung

Wie immer hat Maya uns mit ihren Vorstellungen sehr zum Schwitzen gebracht, denn der Teufel steckt ja bekanntlich im Detail. Aber das lieben wir so an ihrer Arbeit. Es ist immer eine Herausforderung, und dafür stimmt dann auch das Resultat. Schaut einfach mal bei ihr vorbei, sie macht wirklich tolle Designs, ob fürs Web oder Papier.

Verwendete Technologien

Die Credits der verwendeten Technologien gehen an:

• Bootstrap 4 - Unser Lieblingsframework vor allem in Sachen CSS (wir verwenden unseren eigenen Fork welcher auch mit älteren SCSS-Versionen funktioniert und direkt mit OctoberCMS übersetzt werden kann).
• simpler-sidebar - Oft ist einfacher besser, die Sidebar unserer Wahl.
• jQuery - Produktiver mit JavaScript durch den Browser DOM wandern.
• SCSS Autoprefixer - Ein Autoprefixer, der direkt in SCSS funktioniert.
• JumpLink Components - Eine Sammlung weiter Tools für SCSS und JavaScript.
• Sticky-Kit - Damit position: sticky; auch unter Chrome funktioniert.
• GridLoadingEffects - Für einen schönen Effekt, sobald die Bilder sichtbar sind.
• Transformicons - Für einen animierten Hamburger.

Alles halb

In der Desktop-Ansicht ist das Layout zur Hälfte geteilt, links und rechts je 50%. Das konnten wir mit den Columns von Bootstrap 4 sehr gut lösen.

Hier noch einmal visualisiert:

Selbst die Sidebar verwendet ausgefahren 50% der Seite:

Sidebar

Wir haben komplett auf eine Navbar verzichtet und einen animierten Hamburger oben rechts freistehend auf der Seite platziert. In der Smartphoneansicht wird die komplette Fläche von der Sidebar verwendet:

Für die Hamburger-Animation haben wir Transformicons verwendet und für die Sidebar simpler-sidebar modifiziert.

Die wesentliche SCSS-Klasse der Sidebar sieht wie folgt aus:

#sidebar {
    position: fixed;
    top: 0px;
    bottom: 0px;

    z-index: 3000;

    width: 100vw !important;
    right: -100vw;

    @include media-breakpoint-up(md) {
        width: 50vw !important;;
        right: -50vw;
    }

    .sidebar-wrapper {
        height: 100vh;

    }
}

Damit Trasformicons und die simpler-sidebar zusammen funktionieren, haben wir folgenden JavaScript-Code geschrieben:

var sidebarTrigger = ".toggle-sidebar";

$( document ).ready( function() {
    $( "#sidebar" ).simplerSidebar( {
        align: "right",
        selectors: {
            trigger: sidebarTrigger,
            quitter: ".close-sidebar"
        },
        sidebar: {
            width: '50vw'
        },
        mask: {
            display: true,
            css: {
                backgroundColor: "black",
                opacity: 0,
                filter: "Alpha(opacity=0)"
            }
        },
        events: {
          on: {
            animation: {
              open: function() {
                // icon animation for open
                transformicons.transform($(sidebarTrigger+'.tcon')[ 0 ]);
              },
              close: function() {
                // icon animation for close
                transformicons.revert($(sidebarTrigger+'.tcon')[ 0 ]);
              },
              both: function() {

              },
            }
          },
          callbacks: {
            animation: {
              freezePage: false
            }
          },
        },
    });
});

var toggleSidebar = function () {
  $( sidebarTrigger ).click();
}

Alles möglichst smooth

Unser Anspruch war es, den Besucher der Seite nicht im Lesefluss zu stören. Daher gibt es keine neuen Fenster und keine irritierenden Veränderungen auf der Seite. Der weitere Infotext fadet sich smooth ein und verändert nicht die Größe der Seite:

Das HTML in Twig dazu:

<div id="{{handle}}" data-target="#{{handle}}">
    <div class="container-fluid">
        <div class="row">

            <div class="info-wrapper">

                <div class="info">
                    <div class="{{leftColClass}} sticky sticky-top sticky-title">
                        <div class="row">
                            <div class="pos-a-t-md">
                                <div class="{{headerTextColClass}}">
                                    <h2 class="p-t-3">
                                        {{ title |_}}
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="{{rightColClass}}">
                        {% content handle~'.md' %}
                    </div>
                 </div>

                <div class="info-more inactive">
                    <div class="{{leftColClass}} sticky sticky-top sticky-title">
                        <div class="row">
                            <div class="pos-a-t-md">
                                <div class="{{headerTextColClass}}">
                                    <h2 class="p-t-3">
                                         {{ titleMore |_}}
                                    </h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="{{rightColClass}}">
                        {% content handle~'-more.md' %}
                    </div>
                </div>

            </div>

            <div class="col-xs-12 offset-md-6 col-md-6 m-t-3">
                <button class="btn btn-outline-info text-uppercase more-info-btn">
                    {{'<b>Mehr</b> Infos'|_}}
                </button>
            </div>

        </div>
    </div>
</div>

Das zugehörige JavaScript:

$(function() {
    var $moreInfoBtn = $('#{{handle}} .more-info-btn');
    var $aboutInfoMore = $('#{{handle}} .info-more');
    var $aboutInfo = $('#{{handle}} .info');

    $moreInfoBtn.click(function() {

        if( $aboutInfoMore.hasClass('inactive') ) {
            $aboutInfoMore.removeClass('inactive');
            $aboutInfo.addClass('inactive');
            $moreInfoBtn.html('zurück');
        } else {
            $aboutInfoMore.addClass('inactive');
            $aboutInfo.removeClass('inactive');
            $moreInfoBtn.html('<b>mehr</b> Info');
        }

    });
});

Und das Style in Scss:

.info-wrapper {
    position: relative;

    .info {
        display: inline-block; // http://stackoverflow.com/a/19314993
        width: 100%;
    }

    .info, .info-more {

        -webkit-transition: opacity .5s ease-in;
           -moz-transition: opacity .5s ease-in;
             -o-transition: opacity .5s ease-in;
                transition: opacity .5s ease-in;

        opacity: 1;

        &.inactive {
            opacity: 0;
        }

    }

    .info-more {
        position: absolute;
        top: 0;
    }
}

Sticky Überschriften

Leider noch nicht von allen Webbrowsern unterstützt ist die CSS-Eingeschaft position: sticky;. Damit lässt sich beispielsweise übersichtlich darstellen auf welchem Abschnitt der Seite man sich gerade befindet. Daran haben wir uns versucht und umgesetzt und hoffen es ist uns gelungen.

Auf dem Desktop oder Tablet sieht das so aus:

Auf kleineren Geräten so:

Damit das Ganze auch auf allen Webbrowsern funktioniert haben wir Sticky-Kit abgewandelt, womit wir auf eine JavaScript Implementierung zurückgreifen sofern der Browser das CSS-Feature nicht unterstützt.

Wer unseren Weg nachbauen möchte kann unseren Sticky-Kit-Fork und die featureTest-Funktion verwenden.

Der initiale JavaScript-Code dazu sieht wie folgt aus:

var stickySupport = featureTest( 'position', 'sticky' );
var stickyOptions = {};

if(stickySupport) {
    // position: sticky is supportet, dont change the css, just fire the events and add is_stuck class
    stickyOptions.change_css = false;
    $(".sticky-title").stick_in_parent(stickyOptions);

} else {
    // position: sticky is NOT supportet, change the css for fallback sticky, fire the events and add is_stuck class
    $(".sticky-title").stick_in_parent(stickyOptions).on("sticky_kit:stick", function(stick) {
        var $stick = $(stick.target)
        $stick.closest('.row').find('.sticky-title-placeholder').removeClass('hidden-xs-up')
    }).on("sticky_kit:unstick", function(e) {});
}

Es muss nicht immer gerade sein

In einem vorherigem Blog-Artikel haben wir bereits einmal beschrieben, wie man in CSS schräge Linien erstellen kann. Die gleiche Technik haben wir nun für feinfineart.de eingesetzt und mit fixen Hintergrundbildern kombiniert. Mit der CSS-Eingeschaft background-attachment: fixed; ist es möglich, Hintergrundbilder so darzustellen, als ob sie wirklich im Hintergrund liegen würden:

Impressum

In Deutschland ist das Impressum Pflicht und muss leicht zu finden sein. Das kann aber so detailverliebte Menschen wie wir es sind ziemlich stören, daher haben wir uns hier auch etwas Neues einfallen lassen.

Das Impressum erscheint erst, sobald es ausgewählt wird:

Wer sich am JavaScript-Code inspirieren lassen will, hier ist er:

var $imprint = $('#imprint');
var $imprintNav = $('a.imprint');
var $htmlBody = $("html, body");
var $window = $(window);
var $document = $(document);

$imprintNav.attr("href", '');

$imprintNav.click(function(event) {
    event.preventDefault();

    if($imprint.hasClass('hidden-xs-up')) {
        $imprint.removeClass('hidden-xs-up');
        $htmlBody.animate({ scrollTop: $document.height() - $window.height() }, 1000);
    } else {
        var scrollPosition = $imprint.offset().top - $window.height();
        $htmlBody.animate({ scrollTop: scrollPosition }, 1000, function () {
            $imprint.addClass('hidden-xs-up');
        });
    }
});

Es ist die erste Version von feinfineart.de. Wir werden die Seite in Zukunft noch fleißig erweitern, also schaut ruhig ab und zu mal vorbei.

Maya über die Entwicklung des Entwurfs

Wir wollten auch noch gerne Maya über die Entwicklung ihrer Seite zu Wort kommen lassen, um die Entwicklung nicht nur aus technischer Sicht zu erzählen sondern auch, was sie sich wohl dabei gedacht hat und ob sie uns vielleicht nur ärgern wollte:

Wo Inhalte atmen können und es schon etwas schräg wird

"Ehrlicherweise kann ich behaupten: Ich bin mein schlimmster Kunde überhaupt! Ein Designprozess ist generell zeitintensiv, mit Höhen und Tiefen verbunden und streng genommen ist er nie wirklich abgeschlossen – also faktisch wie eine never-ending-lovestory. Und nun bin ich im siebten Himmel, wohlwissend, dass viele feine Details noch folgen. Quasi: Fortsetzung folgt ...

Ziel war es, ein dezentes Design zu entwickeln. Schließlich will ich meinen Kunden nicht die Show stehlen. Das Design der Webseite verfolgt also einen minimalistischen Gedanken. Alle Informationen werden untereinander präsentiert, sind klar strukturiert und werden schnell & direkt an den Leser übermittelt. Das Schöne ist, Dir kann nichts entgehen.

Bei so viel bewusster Linie wirkt das Menü wie eine köstliche Spielerei. Ein kleiner feiner Burger, der in der UX-Design-Welt kontrovers diskutiert wird, aber ebenso heiß begehrt ist. Das kleine Menü-Icon ist spätestens seit dem Responsive Design weltbekannt und verdrängt wohl gekonnt das Standardmenü auf kleinen Endgeräten und zieht nun auch auf den Desktoplayouts ein. Ob verdient oder nicht – für diese Onepage-Webseite funktioniert er wunderbar und integriert sich ebenso bescheiden wie frech in das Konzept.

Das Wesentliche, also der wohl mit Abstand wichtigste Teil neben dem Design, der Inhalt, lebt von eigensinniger Typografie und ernährt sich von ehrlicher und direkter Sprache. Viel Weißraum gibt dem Inhalt die nötige Freiheit und lässt auch den Leser atmen. Das spiegelt sich übrigens insgesamt in all meinen Produkten wieder. Ich mag das. Klare Linien und charakteristische Icons weisen spielerisch den Weg.

Im Grunde war es wohl das Ziel, die Seite mit möglichst viel Persönlichkeit von mir zu füllen. Also nicht nur, um euch zu ärgern. Hoffentlich ist es mir gelungen - beides. Ich bin gespannt, wie meine Seite in Version 1.0 angenommen wird, und bin neugierig auf Anmerkungen, Kritik oder Lob. Schließlich gehört auch Pfeffer in ein gute never-ending-lovestory."

Und nicht vergessen, vorbei zu schauen: https://feinfineart.de/