Wie man die perfekte Single Page Website gestaltet
Einzelseiten-Designs können eine ausgezeichnete Technik sein, um kleinere Websites zu bearbeiten, selbst solche, die Sie ohne mehrere Seiten nicht für möglich halten würden. Es gibt viele gute Gründe für die Verwendung einer einzelnen Seite, von der einfachen Wartung bis hin zu reduzierten Bandbreitenanforderungen.
Wenn Sie sich mit einer kürzeren Site beschäftigen, die normalerweise eine Handvoll Seiten enthält, sollten Sie eine einzelne Seite verwenden und prüfen, ob das Projekt einfacher und benutzerfreundlicher wird. Lesen Sie weiter, um mehr Informationen zu den Vorteilen zu erhalten, wann (und wann nicht) sie zu verwenden sind und welche Best Practices Sie befolgen sollten.
Die Vorteile von Single-Page-Design
Offensichtlich sind Einzelseitendesigns nicht für jedes Projekt ideal. Aber es gibt eine Vielzahl von Gründen, sie zu verwenden, wenn sie passen.
Sie sind intuitiv zu bedienen
Standardmäßig muss der Benutzer wissen, wie er auf einer einzelnen Seite navigieren muss. Sie können Pfeile oder andere Navigationshinweise einfügen, aber mit wenigen Ausnahmen bringt das einfache Scrollen Ihre Besucher von einem Abschnitt zum nächsten.
Sie müssen sich nie darum sorgen, dass Ihre Besucher in mehreren Navigationsebenen stecken bleiben und endlos nach dem suchen, was sie brauchen. Die Verwendung eines Headers oder anderer Navigationslinks ist oft hilfreich, wenn mehrere Abschnitte auf der Seite vorhanden sind, aber auch ohne sie ist die Site verwendbar.
Es kann schneller und einfacher zu warten sein
Während diese eine nicht gegeben ist, wird eine gut codierte Seite mit einer einzelnen Seite wahrscheinlich schneller zu coden sein als eine Seite mit mehreren Seiten. Der Entwurfsprozess kann manchmal weniger Zeit in Anspruch nehmen, obwohl dies davon abhängt, wie komplex die einzelne Seite sein wird.
Eine einzelne Seitenwebsite kann auch bestimmte Designeinschränkungen auferlegen, die den Prozess beschleunigen, sobald Sie ein grundlegendes Layout berücksichtigen. Auch als eine mehrseitige Website muss eine einzelne Seite Abschnitte haben, die nahtlos zusammenarbeiten. Diese Art von Einschränkung kann die Seitenentwicklung wirklich beschleunigen, wenn Sie klar definiert haben, was Sie tun können und was nicht.
Die Wartung kann auch einfacher sein. Wenn Sie nur eine einzige Seite verwalten möchten, ist die Wartung rationeller, solange der Code gut geschrieben ist.
Du bist gezwungen zu vereinfachen
Dieser baut den vorherigen Punkt auf. Wenn Sie nur eine einzige Seite haben, um damit zu arbeiten, müssen Sie die Dinge auf ihre wichtigsten Komponenten vereinfachen. Keine Seiten und Seiten nutzloser Marketing-Propaganda mehr. Sie müssen sofort auf den Punkt kommen.
Besseres SEO-Potenzial
Qualität eingehende Links sind ein großer Teil davon, wie gut eine Website in Suchmaschinen funktioniert. Während Suchmaschinen für viele Websites nicht unbedingt die größte Zugriffsquelle darstellen, sind sie im Allgemeinen immer noch wichtig.
Wenn Sie nur eine Seite haben, ist nur eine Seite verknüpft. Das kann die Bedeutung der Website für Suchmaschinen erhöhen.
Storytelling kann die Action erhöhen
Einseitige Seiten verwenden oft einen Storytelling-Winkel, bei dem mehrseitige Websites nicht so gut sind. Dies kann die Anzahl der Conversions erhöhen und die Besucher dazu inspirieren, aktiv zu werden.
Die Leute sind daran gewöhnt, Geschichten sowohl online als auch offline zu verfolgen, also hat dies Vorteile für die Benutzerfreundlichkeit. Wir haben Geschichten gelesen und gehört, seit wir Kinder sind, also ist es etwas, das uns ganz natürlich kommt.
Leichter zu organisieren
Es gibt keine endlosen Listen von zu organisierenden Seiten und Unterseiten mehr. Kein Wunder mehr, wenn diese Seite oder diese Seite ein Elternteil oder ein Kind sein sollte. Keine riesigen Navigationsmenüs und Untermenüs mehr. Es ist alles auf einer Seite. Und ob Sie Navigationslinks hinzufügen oder die Benutzer einfach scrollen lassen möchten, hängt von Ihnen ab und davon, ob Sie der Ansicht sind, dass dies zur Benutzererfahrung beiträgt oder nicht. Das ist keine Option, wenn eine Website mehrere Seiten umfasst.
Reduzierte Bandbreite
Auch wenn dies auf der Seite des Hostings nicht mehr so wichtig ist, sollten Sie bedenken, wie viele Nutzer heutzutage mit mobilen Geräten auf Ihre Website zugreifen. Die Verringerung der Bandbreite Ihrer Website wird von Benutzern mit begrenzten Datentarifen geschätzt.
Eliminieren Sie mobile Websites
Responsive Design ist natürlich nicht auf einzelne Seiten beschränkt. Aber je komplexer eine Website ist, desto schwieriger ist es, sie auch auf einem kleineren Bildschirm, selbst mit einem ansprechenden Design, gut zu machen. Eine einseitige Website ist notwendigerweise nicht komplex. Das Design ansprechend zu gestalten, ist in der Regel einfacher. Vereinfachte Navigation und ähnliche Änderungen machen auch ein Design, das auf kleinen Bildschirmen gut funktioniert, einfacher.
Zur Parallaxe oder nicht zur Parallaxe?
Abhängig von Ihrem Standpunkt ist Parallax-Scrolling entweder das Beste, was jemals im Internet passiert ist, oder eine überstrapazierte Gimmick-Geißel in unseren Browsern. Aber egal, wo du stehst, es sieht nicht so aus, als würde es bald verschwinden.
Persönlich habe ich das Gefühl, dass es Zeit und Ort für Parallax Scrolling gibt. Einige Seiten-Seiten können wirklich von diesem Effekt profitieren, während andere als Gimmick oder schlechter wirken: schwer zu verwenden. Der Schlüssel ist zu entscheiden, ob der Parallax Scroll-Effekt, den Sie verwenden möchten, etwas ist, das die Benutzerfreundlichkeit der Website tatsächlich verbessert, oder wenn Sie es nur verwenden möchten, weil es cool aussehen wird.
Eine andere Sache zu berücksichtigen, wenn Sie sich entscheiden, dass Sie Parallax Scrolling verwenden möchten, ist, ob Sie JavaScript oder eine einfache CSS-Technik dafür verwenden. Weitere Informationen zu beiden Optionen finden Sie im Abschnitt "Ressourcen".
Wann sollte eine einzelne Seite verwendet werden und wann nicht?
Es gibt zwar viele Vorteile für einzelne Seiten, aber sie sind keine perfekte, universelle Lösung. Es gibt viele Male, wenn Sie nicht ein einseitiges Design verwenden sollten, während es viele andere Zeiten gibt, in denen eine einzelne Seite viel sinnvoller ist als eine mehrseitige.
Wenn Sie eine Website einrichten, die ohnehin nur eine Handvoll Seiten enthält, ist eine Seite mit einer einzelnen Seite möglicherweise perfekt. Wenn Sie alles auf eine Seite zusammenfassen, kann dies der gesamten Site ein moderneres Aussehen verleihen, und wenn es ohnehin wenig Inhalt hat, kann es auf einer einzelnen Seite so aussehen, als hätte es mehr Substanz.
Ein weiteres gängiges Beispiel für die einseitige Website ist die Pre-Launch-Website. Diese sind meistens eine einzelne Seite, oft mit einem Formular für eine Newsletter-Anmeldung. In den meisten Fällen können die Informationen, die der Öffentlichkeit während des Pre-Launchs zur Verfügung gestellt werden, leicht auf einer einzelnen Seite organisiert werden. Daher ist es sinnvoll, diesen Stil zuerst zu berücksichtigen, wenn Sie diese Seiten entwerfen.
Ein-Produkt-E-Commerce-Websites sind ein weiterer Ort, an dem einzelne Seiten-Websites groß sein können. Wenn Sie nur ein Produkt verkaufen, sei es ein physisches oder ein digitales Produkt, warum sollten Sie sich dann mit mehreren Seiten beschäftigen? Eine einfache, einseitige Website kann ein viel besseres Verkaufswerkzeug sein.
Sie denken vielleicht, dass eine komplexere E-Commerce-Website nicht gut für eine einzelne Seite geeignet ist, aber es kann immer noch sein. Zugegeben, ich würde es für Sites vermeiden, die mehr als ein Dutzend oder so Produkte haben, aber ein einfacher Online-Shop kann leicht auf einer einzigen Seite gehalten werden, mit modalen Fenstern zum Laden von Produktdetails und dem Checkout-Prozess.
Die Verwendung einer einzelnen Seitenwebsite ist ziemlich einfach: Websites, die groß, komplex oder standardmäßig große Informationsmengen aufweisen, eignen sich nicht für eine einzelne Seitenwebsite. In diesen Fällen sind Sie mit einer traditionelleren Websitestruktur viel besser dran.
Hybrid-Websites
Während es eine Menge toller einseitiger Seiten gibt, gibt es auch viele hybride Websites. Sie erzeugen den Eindruck einer einzelnen Seite, aber durch Verwendung von Ajax, modalen Fenstern und dergleichen enthalten sie tatsächlich mehrere Inhaltsseiten.
Die Dang & Blast-Site ist ein gutes Beispiel dafür.
Dies kann eine großartige Lösung sein, wenn Sie nicht alles auf eine Seite bringen können.
Manche Seiten "betrügen", wenn es um die einzelne Seite geht. Sie haben eine einzelne Seite für ihre Hauptwebseite, aber dann haben sie einen Blog auf einer anderen Domain (manchmal eine Tumblr- oder WordPress.com gehostete Seite). Es ist nichts falsch daran, und es kann eine Möglichkeit sein, Ihre Nachricht auf Ihrer Haupt-Website fokussiert zu halten, ohne die Vorteile eines Blogs aufzugeben.
Best Practices für einzelne Seiten
Die meisten der Prinzipien guten Designs sind immer noch auf Seiten mit einer einzelnen Seite anwendbar, wie bei jedem guten Website-Design. Aber es gibt einige zusätzliche Dinge, die Sie im Auge behalten sollten, von denen einige bereits oben angesprochen wurden.
Halte es einfach
Wenn Sie versuchen, ein Design zu erstellen, das zu komplex für den Inhalt ist, den Sie präsentieren möchten, tun Sie oder Ihre Benutzer keinen Gefallen. Stattdessen sollten Sie sowohl Ihr Design als auch Ihre Inhalte so weit wie möglich vereinfachen und gleichzeitig präsentieren, was Sie brauchen.
Navigationslinks sind immer noch hilfreich
Nur weil Nutzer scrollen können, um auf Ihrer Website zu navigieren, bedeutet dies nicht, dass dies der benutzerfreundlichste Weg ist. Dies gilt insbesondere, wenn Sie eine lange Seite mit vielen Abschnitten haben. Wenn es keinen guten Grund gibt, sie nicht einzubeziehen, macht das Hinzufügen von Navigationslinks zu bestimmten Abschnitten Ihre Website benutzerfreundlicher.
Teilen Sie Ihre Inhalte auf
Eine einzelne Seite bedeutet nicht, dass alles ein langer Abschnitt sein muss. Eigentlich sollte es nicht sein. Teilen Sie Ihren Inhalt in logische Abschnitte und Abschnitte auf, damit Benutzer besser finden können, wonach sie suchen.
Mach etwas mit all dem Hintergrund
Einseitige Seiten haben oft einen großen Hintergrund. Zugegeben, manchmal sind diese Hintergründe einfach oder mit einem sich wiederholenden Muster; aber andere Seiten mit einer Seite nutzen den ganzen Raum, um etwas Kreatives zu tun. Dies kann auch helfen, Ihre Inhalte wie bereits erwähnt aufzuteilen. Ihr Hintergrund muss nicht ein einziges Bild sein. Es kann eine Reihe von Bildern sein, wenn das zu Ihren Inhalten passt.
Ressourcen für Ihre einzelnen Seiten-Websites
Es gibt Hunderte von Ressourcen, einschließlich Vorlagen, für Websites mit einer einzelnen Seite. aber hier konzentrieren wir uns auf diejenigen, die auffallen.
Reine CSS Parallax Scrolling : In diesem Artikel von Keith Clark wird erläutert, wie eine Parallax-Scroll-Technik nur mit CSS erstellt wird. Dies ist eine großartige Option, wenn Sie JavaScript nicht verwenden möchten (oder nicht wirklich wissen).
Skrollr : "Parallax Scrolling für den Rest von uns". Es ist eine eigenständige Bibliothek, die mit Mobilgeräten und Desktops funktioniert. Es ist keine jQuery erforderlich, nur einfaches altes JavaScript.
Stellar.js : Stellar.js ist eine weitere einfach zu bedienende Parallax-Scroll-Bibliothek. Es bietet viele Konfigurationsoptionen und iOS-Unterstützung.
Eine Seite Website Wireframes : Dieses Set von Wireframes für Designs mit einer einzelnen Seite kann ein guter Ausgangspunkt sein, wenn Sie sich nicht sicher sind, wie Sie Ihre Site strukturieren sollen. Sie können kostenlos heruntergeladen werden. Es gibt einen zweiten Satz, den Sie herunterladen können Hier .
Eine Seite Liebe : One Page Love ist die führende Website mit einer Seite von mehr als 5000 Beispiel-Websites, die ständig erweitert wird. Sie bieten auch Tonnen von Vorlagen und anderen Ressourcen.
Starten Sie Bootstrap : Start Bootstrap hat eine große Auswahl an kostenlosen einseitigen Bootstrap-Themes. Es gibt Themen für Agenturen, Freiberufler, Portfolios, Zielseiten und mehr.
Eine Seite Liebe Vorlagen Zusätzlich zu ihrer umfangreichen Galerie bietet One Page Love auch kostenlose und Premium-Vorlagen.
Eine Seitenmanie : One Page Mania bietet eine Galerie mit einzigartigen Websites und Vorlagen, die Sie herunterladen oder kaufen können.
Fazit
Einzelseiten-Designs können eine ausgezeichnete Option für viele verschiedene Arten von Websites sein. Sie sind zwar nicht das A und O eines kleinen Website-Designs, sie sind jedoch bei vielen Projekten eine Überlegung wert. Berücksichtigen Sie die Gründe für die Verwendung einer einzelnen Seite und berücksichtigen Sie dann die Gründe dafür und entscheiden Sie von dort.