Schritt-für-Schritt Anleitung


Hinweis

Sie sehen hier Auszüge und Screenshots aus älteren Versionen der Jimdo-Handbücher. Viele Informationen und der Jimdo-Siteadmin wurden mittlerweile aktualisiert. Alle Titel finden Sie stets voll aktualisiert auf jimdo-handbuch.de.

 

Wenn Sie sich für das Thema Suchfunktion auf Jimdo interessieren, besuchen Sie bitte unsere Seite suchfunktion.website.



1. Layout auswählen

Nachdem Sie sich auf Ihre Jimdo-Page eingeloggt haben, können Sie sich mit einem Klick auf den Bereich „Layout“ (jetzt: Design) in der Seitenleiste einen Überblick auf die ihnen und Ihrer Jimdo-Lizenz zur Verfügung stehenden Layouts verschaffen.

1.    Sie wählen das Layout durch einen Klick auf die entsprechende Grafik in der Layoutliste aus

2.    Sie bestätigen die Designänderung für Ihre Seite


3.    Anschließend passen Sie für dieses Design verfügbare Details mit unterschiedlichen Einstellungsmöglichkeiten Ihrer Jimdo-Page an

Die einzelnen Layoutkonzepte der verfügbaren Jimdo-Layouts erkennen Sie an der Miniaturabbildung in den beiden verfügbaren Ansichtsarten für Jimdo-Layouts.


Die Miniaturabbildung des Layouts“ verrät Ihnen bereits wichtige Details für Ihre Layout-Entscheidung:

  1. ggf. gesonderte Darstellung des ersten Navigationslevels (hier quer)
  2. Platzierung weiterer Navigationslevel (hier Ebenen 2 und 3)
  3. die Platzierung der Headergrafik, welche sogar voll dynamisch das von Ihnen verwendete Headerbild miniaturisiert, zeigt
  4. die Platzierung der Sidebar (Inhalte, die hier abgelegt werden, erscheinen auf jeder Unterseite Ihrer Jimdo-Page, außerdem „wohnt“ hier zum Beispiel der Warenkorb wenn Sie einen Shop einrichten
  5. Platzierung und strukturelle Bemaßung des Content-Areals in dem Sie auf jeder Seite Ihre Inhalte darstellen

Hilfreich in den Layoutansichten und bei der Auswahlliste der kleine grafische Umschalter links neben der Zeile „Aktuelles Layout“.

Mit diesem schalten Sie zwischen der Kachel- und der Detailansicht der Layouts hin und her.


Der Klick auf diese Layout-Details schaltet diese Ansicht um auf eine rubrizierte Liste der Fähigkeiten bzw. Nicht-Fähigkeiten dieses Layouts mit der Sie die Eignung des Layouts für Ihre Layout-Wünsche besser einschätzen können.

1.1 Hilfe zur Auswahl des richtigen Layouts

Eine hervorragende Unterstützung für eine von vornherein zielgerichtete Auswahl des für Sie am besten geeigneten Jimdo-Layouts (und damit ggf. stundenlanges Rangieren in einem Layout das sich im Nachhinein dann doch nicht als geeignet erweist) ist die von Kurt Andro erstellte Webseite

www.layout-tabelle.de

in der nicht nur sämtliche Jimdo-Layouts dargestellt werden, sondern auch nach bestimmten – für Ihre Designwünsche gegebenenfalls relevante – Kriterien wie z.B. „Hintergrund änderbar“, „Farben anpassen“ oder Position und Ausrichtung der Navigationsebenen gefiltert werden können.


An dieser Stelle ein großes Lob und herzlichen Dank für diese großartige und hilfreiche Fleißarbeit! Jimdo hat mit einem eigenen Style-Tool diese Arbeit übrigens fortgesetzt unter http://hilfe.jimdo.com/gestaltung/designs/auswahl/


Wählen Sie ein Layout, das zu ihren Plänen den Inhalten Ihrer Website passt. Wenn Ihre Website zunächst nicht allzu viele Inhalte haben sollte, verzichten Sie auf geteilte Navigationsmodelle und wählen Sie ein Layout innerhalb dessen auch alles mit zum Beispiel nur einer Navigationsebene (zum Beispiel quer) dargestellt werden kann, ohne dass bedauerlicherweise permanent eine nicht verwendete zweite Navigationsebene deutlich und anklagend sichtbar ist.


    Achten Sie bei der Wahl des Layouts auch auf gegebenenfalls fest implementierte grafische Elemente die sich möglicherweise nicht mit dem von Ihnen gewünschten Resultat vertragen könnten.

Es könnte schwer werden diese ohne versierte „Code-Frickelei“ loszuwerden. Konzentrieren Sie sich im Zweifelsfall lieber auf ein neutral anmutendes Layout.


2. Sichtung der verfügbaren Gestaltungsräume

Wenn Sie sich grundsätzlich für ein Design entschieden haben, machen Sie sich spätestens jetzt ein Bild von den gestaltbaren Bereichen Ihres Layouts. Das können in unserem Beispiel die folgenden Bereiche des Layouts F535 sein.

Da wir die Schrift später im Bereich Style gestalten und das Ausrichten des Layouts von geringem Interesse ist, wenden wir uns zunächst den grafischen Bestandteilen dieser Jimdo-Page zu: dem Hintergrund und dem Titelbild.

3. Der Hintergrund

Bei der Konzeption einer Jimdo-Webseite mit den bestehenden Layouts empfehle ich grundsätzlich von hinten nach vorne zu arbeiten.


Da Sie durch die Arbeit mit einem Webbaukasten ohnehin konkrete Vorgaben in der Gestaltung des eigentlichen Webcontainers haben, kommt dem Hintergrund ihrer Jimdo-Page eine besondere Bedeutung zu, mit dem Sie wichtige Effekte erzielen können. Natürlich lassen sich hier auch großformatige Fehler machen.


Sofern möglich, sollten Sie sich vor der Wahl des Hintergrundes ein wenig mit der Nutzung Ihrer Seite bzw. der Seite Ihres Kunden machen.

Um z.B. Bilder oder Grafiken zu nutzen, die sich qualitativ als Hintergrund eignen, sollten Sie ein bestimmtes Mindestformat nicht unterschreiten.


Mobile Nutzung nicht mitgerechnet, kann eine typische Verteilung von Bildschirmauflösungen mit denen eine Webseite angesehen wurde in einer Statistik etwa so wie im Beispiel aussehen.

Im Ergebnis heißt dies für das Hintergrundbild, dass es im Durchschnitt in einem Browserfenster von ~ 1.280 Pixel Breite angezeigt wird. Da sollte Ihr Hintergrundbild diese Breite auch als Mindestbreite verwenden.


Wenn Sie also ein Bild als Hintergrund (im Vollbild-Modus) verwenden möchten, sorgen Sie dafür, dass es sich um ein mindestens 1280 x 1024 Pixel großes JPG handelt, um einem häufig verwendeten Bildschirmformat auch qualitativ zu genügen. Es besteht immer die Möglichkeit eine Farbe, einen weißen Hintergrund oder eine Grafik als Hintergrund einzusetzen, das sollte man auch zunächst in Angriff nehmen, da der Einsatz eines dynamischen Fotos oder Videos eine angemessene konzeptionelle Beachtung verdient.

Unter dem nachfolgenden Link habe ich einige neutrale Hintergründe und Headerdateien zur freien Verwendung hinterlegt:

> ARBEITSMATERIAL ONLINE
www.jimdo-handbuch.de/jimdo/grafiken

3.1. Fotos als Hintergrund

Der häufig geäußerte Wunsch nach einem vollformatigen Bild oder Video im Hintergrund einer Webseite will überdacht sein. Sie tun Ihrer Website nicht unbedingt einen Gefallen, indem Sie Bild mit Bild konkurrieren lassen. Besteht der Inhalt Ihrer Webseite aber ausschließlich oder überwiegend aus Text mit minimalem Grafikeinsatz, so können Sie meistens bedenkenlos ein aussagestarkes Bild im Hintergrund verwenden.


© littleny - Fotolia.com
© littleny - Fotolia.com

Ein Foto sollte schnell vom Auge zu begreifen sein, möglichst keine Schriften darstellen und vor allem an den Rändern eine gleichmäßige Wirkung erzielen, da die Mitte des Bildes ja von der Webseite überlagert wird.


Hier einige – völlig subjektiv ausgewählte – Beispiele, die kein bestimmtes Farbkonzept verfolgen, aber die Grundidee der Bildeignung erläutern können. Gut geeignet ist die Wasserfläche 1280 x 1024 Pixel. Klare Farbgebung, durch ohnehin vorhandene Unschärfen im Motiv gut skalierbare Datei.


Das Auge begreift den Bildinhalt schnell auch wenn er im Hintergrund liegt.

© AA+W - Fotolia.com
© AA+W - Fotolia.com

Eher ungeeignet: Küchenszene 1280 x 1024 Pixel. Randobjekte sind schlecht erkennbar, Wasserhahn wird abgeschnitten werden und damit als Objekt schwer begreifbar.

Eine Regel für den Fotoeinsatz als Hintergrund könnte zum Beispiel wie folgt aussehen:


Verwenden Sie im Content viel Bild mit Text, haben einen ausgeprägten Seitenheader, einen Slider, nutzen häufig Bildergalerien, Videos oder sonstige Grafikflächen, so sollte sich der Hintergrund dezent absetzen und besser nicht aus einem Foto bestehen.


Zur Verwendung eines Fotos (oder einer anderen eigenen Grafik) als Hintergrund in einer Jimdo-Page laden Sie es (sofern das Layout diese Funktion zulässt) unter Style > Eigener Hintergrund als Einzelbild hoch und stellen die Wiederholung des Bildes auf „Vollbild“.

Hier können Sie auch mehrere Bilder hochladen und diese als Zufalls- oder Wechselbild (sogenannter Hintergrundslider) nutzen.


Dies ist eine Option die sich unmittelbar an die zuvor genannte Regel zum Fotoeinsatz anschließt, denn noch mehr bunte Bilder können selbstverständlich noch mehr visuelles Chaos veranstalten.



3.2. Grafiken als Hintergrund

Grafiken als Hintergrund bieten den Vorteil, dass sie sich wesentlich einfacher als Fotografie bearbeiten und auf die individuellen Webseiten Einsatz abstimmen lassen.


Zudem erhebt eine Grafik nicht unbedingt den Anspruch großer Komplexität, was sich positiv auf Dateigröße und Ladegeschwindigkeit der Webseite auswirken kann.


Schon mit wenigen Strichen oder einer einfachen Abstufung von Weiß nach Dunkelgrau lassen sich angenehme und wirkungsvolle Hintergründe erzielen, z.B. so:

© THesIMPLIFY - Fotolia.com
© THesIMPLIFY - Fotolia.com

Genau wie bei Fotografien gibt es Grafiken (insbesondere wenn sie nicht extra für eine Webseite erstellt wurden) die sich besser oder schlechter für den Einsatz als Hintergrund in einer Webseite eignen.

Gut geeignet: Abstraktes Wellenmuster 1280 x 800 Pixel. Sanfte Übergänge, unaufdringliche Form, dezente farbliche Abstufungen.
 



© opicobello - Fotolia.com
© opicobello - Fotolia.com

Eher ungeeignet: Farbfächer 1280 x 800 Pixel.


Zu Farbintensiv, zahllose Winkel und Linien... das Objekt bindet die Aufmerksamkeit zu stark.

Achten Sie vor allem darauf, im Hintergrund keine zu detailreichen grafischen Texte mitlaufen zu lassen, da sie stets mit einem vordergründigen Schriftbild konkurrieren werden.

4. Einige grundsätzliche Empfehlungen

4.1 Wenig Bild, verhältnismäßig viel Content

Abgesehen von grafisch anspruchsvollen oder komplexen Seitenaufbauten können Sie sich an folgenden Grundaufbaumodellen für Seitenhintergrund, Seitenkörper und Content orientieren, die natürlich reinen Empfehlungscharakter haben:


Hier können Sie einen grafischen (nicht fotografischen) Hintergrund einsetzen.


Benutzen Sie einen zum Seitenhintergrund farblich passenden Header oder einen Vollfarbton und eine neutrale Körperfarbe.


4.2 Sehr viel Bild, wenig Text

Hintergrund so neutral wie möglich, kein zusätzliches Headerbild, Seitenkörper maximal an den Hintergrund adaptiert, damit die Bilder ungestört wirken können.


Schwarz/Weiß Grau/Schwarz oder ähnliche neutrale Text/Farbkombinationen benutzen.


Verwenden Sie vor allem serifenlose Schriften, die keine Aufmerksamkeit abziehen und halten Sie die Navigation überschaubar klein.



4.3 Mehrseitig textlastig

Bieten Sie hier volle Konzentration auf den Text. Dieser sollte extrem gut lesbar sein und mit Absätzen gegliedert.


Verwenden Sie gut lesbare Schriften 13 bis14 Pixel groß, dunkel auf schlagweißem Grund. Nehmen Sie ein schmales Layout, da sich Text in der Breite nicht gut lesen lässt und einen Zeilenabstand (Durchschuss) von 140 Prozent.


Der Hintergrund sollte thematisch harmonisieren, darf auch intensiv und detailreich fotografisch sein, sollte aber möglichst nicht animiert werden.

4.4 Prozessorientiert

Ist das Ziel Ihrer Webseite das Generieren von Anträgen, Abschlüssen, Kontaktaufnahmen etc. Dann lenken Sie nicht davon ab.

 

Prozessorientierte Webseiten verlangen dem Besucher Konzentration ab. Verlieren Sie den Kunden nicht auf Ihren Zielseiten durch Ablenkung und Anreize.

 Bebildern Sie – thematisch passend – nur den Prozess oder das dahinter stehende Ziel, und halten Sie alle weiteren Elemente neutral, seriös und vor allem unauffällig.


5. Kopfgrafiken

Gemäß den vorangegangenen Erläuterungen macht es nur dann Sinn Kopfgrafiken einzusetzen, wenn diese

  • in einem thematischen Verhältnis zum Inhalt stehen
  • nicht mit starken (oder animierten) Hintergrundbildern konkurrieren
  • nicht mit starken oder großformatigen Inhaltsbildern konkurrieren
  • qualitativ hochwertig sind sowie die Message und den Anspruch der Webseite unterstützen


Für die Auswahl von Headerbildern bei Fotoservices wie dem geschätzten fotolia.com gibt es interessante Auswahlhilfen. Zum Beispiel den Farbfilter mit dessen Hilfe farblich zum Hauptfarbton passende Bilder angezeigt werden, z.B. Bilder zum Suchwort „Strand“, die mit dem Farbton #C98E16 harmonieren:


Noch einmal sei empfohlen, nicht zu viel Bild zu verwenden. Wenn auf der Hintergrund-Fotoslideshow eine farbige Webseite steht, die ein buntes Headerbild verwendet und auch mit Fotos im Inhalt nicht geizt, wird der User schlichtweg überfordert sein. Verwenden Sie Bilder nur dort, wo sie einen konkreten Zweck erfüllen oder tausend Worte sparen.