Screenshot TWILLI Air

TWILLI Air – Minimalistische “One-Page” Landing Page

Wer auf der Suche nach einer modernen One-Page Landing Page ist, wird mit TWILLI Air von “TwilliThemes” sehr gut bedient sein. Durch ein minimalistisches Design mit Hintergrundbildern, die sich über die gesamte Bildschirmbreite erstrecken, macht dieses Bootstrap Theme einen professionellen Eindruck. Wir haben TWILLI Air näher unter die Lupe genommen und zeigen, was diese Landing Page alles kann.

Inhaltsverzeichnis

Design und Wirkung

TWILLI Air besticht durch sein minimalistisches Design, welches vor allem durch die Verwendung von wirkungsvollen Hintergrundbildern besticht. Das Theme ist eine klassische One-Page Landing Page, die auch durch das Verwenden von Parallax Scrolling sehr aufgeräumt und ruhig wirkt.

Im linken Bereich der Landing Page befindet sich das Menü, welches “fixed” ist, also sich immer am gleichen Platz des Bildschirms befindet. Der Hintergrund des Menüs ist ein Farbverlauf, der im Standard-Template Dunkelgrau ist und dessen Transparenz nach unten hin immer größer wird.

Der untere Bereich des Menüs
Abbildung 1: Copyright und Social Media

Im unteren Bereich des Menüs können Social Media Accounts, wie Facebook, Twitter und Google Plus, verlinkt werden (Siehe Abbildung 1). Für ein Copyright ist ebenfalls Platz. Für deutsche Webseiten-Betreiber könnte es sich hier auch anbieten den Link zum Impressum und der Datenschutzerklärung zu platzieren.

Das Webseiten-Logo kann im oberen Bereich des Menüs platziert werden. Im Beispiel-Content wird ein Logo im PNG-Format mit der Größe 117px x 53px und transparentem Hintergrund verwendet.

Hauptseite und Inhalte

Wie bereits erwähnt verwendet das Template das so genannte Prallax Scrolling. Vorteil dabei ist, dass der Besucher keine neue Seite aufrufen muss, sondern jegliche Inhalte auf einer Seite sind. Eine Besonderheit bei TWILLI Air ist, dass sich das Hintergrundbild ändert, wenn der Besucher die Webseite nach unten oder oben scrollt. Somit kann jedem Bereich ein eigenes Hintergrundbild gegeben werden.

Um die Ladezeit der Webseite in Maßen zu halten, wird beim Aufruf der Seite lediglich das erste Hintergrundbild geladen. Alle andere werden dann nach der Reihe im Hintergrundbild vorgeladen, so dass der Besucher dies, im Normalfall, nicht mitbekommt.

Ansonsten lassen sich mit TWILLI Air jegliche Bootstrap-Elemente wie gewohnt benutzen.

Sonstige Funktionen

Kontaktformular TWILLI Air
Abbildung 2: Kontakformular mit Captcha und Formular-Kontrolle

Im Template enthalten ist unter anderem ein fertiges Kontaktformular (siehe Abbildung 2). Die entsprechende PHP-Datei, die das Versenden der Nachricht an den Webmaster übernimmt ist ebenfalls mit dabei. Das Kontaktformular enthält außerdem ein Captcha und eine Formular-Kontrolle, um automatisierte Spam-Nachrichten zu vermeiden.

Die Felder “Name”, “E-Mail Adresse”, “Nachricht” und “Telefonnummer”, sind bereits vorgefertigt. Das Erweitern des Formulars um weitere Eingabefelder ist relativ einfach.

Darstellung auf mobilen Endgeräten

Wie für Bootstrap Themes üblich, ist auch TWILLI Air für die Darstellung auf mobilen Endgeräten wie Smartphones oder Tablets, durch responsives Webdesign, optimiert.

Smartphone

TWILLI Air auf dem SmartphoneAbbildung 3: TWILLI Air iPhone 5

Wie auf Abbildung 3 zu sehen, verschiebt sich das Menü in der mobilen Ansicht nach oben. Durch das Klicken auf das Quadrat werden die Links aus dem Menü nach unten hin herausgeschoben. Was etwas Schade ist, ist dass der Button “find out more”, nicht mehr ganz zu sehen ist. Hier ist natürlich auch die Länge des Textes verantwortlich.

Wer auf dem Desktop mehr Text, als auf dem Smartphone anzeigen möchte, kann ganz einfach zwei Texte vorbereiten und diese dann mit den folgenden Bootstrap-CSS-Klassen anzeigen lassen oder nicht.

.visible-xs <!-- Zeigt Inhalte nur auf dem Smartphone -->
.hidden-xs <!-- Verbirgt Inhalte nur auf dem Smartphone -->

Tablet

Screenshot TWILLI Air auf dem TabletAbbildung 4: TWILLI Air auf einem iPad 3

Wie auf Abbildung 4 zu sehen, wird die Landing Page auf Tablets genauso, wie auch auf dem Desktop angezeigt. TWILLI Air lässt sich auch so sehr gut benutzen.

Mögliche Einsatzbereich der Landing Page

Meiner Meinung nach kann TWILLI Air vor allem für kleine Firmen- oder auch Freelancer-Webseiten interessant sein. Durch die Galerie-Funktion können zum Beispiel Fotos der Mitarbeiter oder auch der Produkte und Referenzen gut abgebildet werden.

Das Kontaktformular sollte nach den eigenen Bedürfnissen angepasst werden und selbstverständlich “eingedeutscht” werden.

Bei der Auswahl der Hintergrundbilder sollte man sich Zeit lassen. Diese sind die elementaren “Wirker” dieser Landing Page. Wer gute Bilder sucht, die man frei verwenden kann (sogar ohne Angabe der Quelle), sollte übrigens auf Unsplash fündig werden.

Verwendete JavaScripts und Schriftarten

  • jQuery 1.11.1
  • Bootstrap 3.2.0
  • jQuery Easing 1.3
  • Backstretch
  • Owl Carousel 1.3.2
  • Detect Mobile Browsers
  • Google Fonts
  • Font Squirrel
  • Morguefile
  • iconmonstr
  • Font Awesome 4.2.0
  • Lightbox 2.7.1

Technische Daten des Themes

Bezeichnung Werte
Bootstrap-Version 3.2.x
Layout-Art Responsive
Browser-Unterstützung Internet Explorer 9+
Chrome
Firefox
Opera
Safari
Preis pro Lizenz $ 10
Anbieter WrapBootstrap.com

Fazit

TWILLI Air ist ein sauberes, minimalistisches Template, mit einfachen Funktionen, die viel hermachen. Das Anpassen an die eigenen Bedürfnisse, ist relativ einfach. Grundlagenwissen im Bereich Bootstrap, CSS und JavaScript sollte jedoch vorhanden sein.

Du hast bereits Erfahrung mit diesem Template, oder hast Fragen dazu? Ich freue mich auf Deinen Kommentar!

Du möchtest regelmäßig mit interessanten Neuigkeiten zum Thema "Twitter Bootstrap" versorgt werden? Trag Dich in den Bootstrapaholic Newsletter ein. Wir versenden keinen Spam! Du kannst Dich jederzeit austragen.

Dieser Beitrag wurde unter Landing Pages abgelegt am von .

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>