Ergänzungen zum Update

Neue Möglichkeiten

Es geht weiter mit der "Vollendung" unserer neuen page4 Version. Das neue Update hat einige interessante Erweiterungen parat. Fangen wir am besten gleich damit an, diese zu zeigen und zu erklären.

Google Fonts

Es gibt rund 700 Webfonts, die von Google kostenlos zur Verfügung gestellt werden. Der Vorteil dabei ist, dass die Informationen von einem Server von Google geladen werden und es nicht mehr darauf ankommt, ob die Schrift auf dem eigenen Rechner installiert ist. Dadurch sieht deine Webseite auf jedem Browser und Rechner gleich aus. Endlich kannst du Schreib- und Schmuckschriften verwenden ohne dir Gedanken zu machen, ob der Besucher deiner Webseite diese Schriften hat.

Wir laden die Schriften von Google so, dass deine Webseite möglichst ohne Verzögerung sofort in der Schrift angezeigt wird. Das führt zwar dazu, dass Google bei der Bewertung Punkte abzieht, ist aber trotzdem sinnvoll, wie bereits erklärt.

Zum Start stellen wir erstmal rund 30 ausgewählte Fonts zur Verfügung und die Möglichkeit, Schriften zu suchen (1). Diese Suche unterscheidet nach Groß- und Kleinbuchstaben. Sobald Du zum Beispiel ein großes B eintippst, werden alle Schriften gezeigt, die mit B anfangen oder ein großen B insgesamt im Namen haben. Bei den wenigen Schriften erscheint das wenig sinnvoll, aber sobald alle 700 Schriften verfügbar sind, wirst du das zu schätzen wissen.
Die Liste zeigt vorne (2) den Schriftnamen an und dahinter (3) einen Satz und Zahlen, womit alle Buchstaben des Alphabets vorgestellt werden, ausgenommen die deutschen Umlaute und ß.

Die restlichen Schriften werden wahrscheinlich erst Anfang September folgen und sobald es geht, wird der Dialog umgebaut, damit du besser die gewünschte Schrift findest.

Strukturen

Diese neue Funktion gibt es bei keinem anderen Webbaukasten und erleichtert dir ungemein die Gestaltung deiner Webseite. Jedes Design enthält Elemente wie Header, Footer, Navigationen, Sidebars und Inhalte. Um diese Elemente im Browser zu platzieren, benötigt man HTML. Damit dieser Code möglichst klein und effektiv ist, haben wir für unterschiedliche Anordnungen (Strukturen) jeweils eigene HTML-Codes geschrieben. Aktuell gibt es 4 Strukturen (4) wobei man die Struktur 3 und 4 auch zusammenfassen könnte, da du ja Elemente ausblenden kannst.

Struktur 1 = Damit kann man die meisten Webseiten abbilden. Die Elemente Header und Footer sind so breit wie die gesamte Webseite und die beiden Sidebars ergeben zusammen mit dem Inhaltsbereich den mittleren Teil der Webseite. Natürlich kannst Du die Sidebars ausblenden und dann ist der Inhalt genauso breit wie der Header oder der Footer.
Struktur 2 = Die beiden Sidebars sind links und rechts der anderen Elemente angeordnet und füllen die gesamte Höhe der Webseite aus. Header, Footer und Inhalte sind untereinander und gleich breit.
Struktur 3 = Jedes Element (Header, Navigation, Inhalt und Footer) haben zusätzlich einen Streifen, der über den gesamten Browser geht und unter diesen Elementen liegt. Der Aufbau selbst ist wie Struktur 1 plus die erwähnten Streifen, die völlig neue Gestaltungsmöglichkeiten bieten.
Struktur 4 = Entspricht der Nr. 3 nur dass als Grundeinstellung die Sidebars ausgeblendet sind.

Wenn wir besondere Designvorlagen entwickeln, die man mit keiner dieser 4 Strukturen abbilden kann, wirst du weitere Strukturen nutzen können.

Das Interessante daran ist, dass du jederzeit von einer Struktur auf eine andere wechseln kannst und sofort siehst, wie sich dadurch das Design ändert, ohne dass irgendwelche Einstellungen verloren gehen. Letztlich kannst du dir einfach eine Designvorlagen auswählen und kannst in Verbindung mit den Struktur daraus jede Vorlage bauen, die wir aktuell zur Verfügung stellen.

Im Screen siehst du Menüpunkte, auf die du aktuell keinen Zugriff hast. Unter dem Punkt "Design" (2) wird es in Kürze die ersten neuen Vorlagen geben, die wir unten schon mal kurz andeuten werden. Aktuell sind 7 Vorlagen fertig. Das ist natürlich nur der Anfang. Wir werden diese Vorlagen in jedem Fall Anfang nächster Woche veröffentlichen und dann regelmäßig erweitern. Versprochen.
Mit dem Menü Strukturen (1) kommst du zu den beschriebenen Strukturen, die durch große Icons (4) dargestellt sind. Irgendwann später wirst du den Punkt Farben (3) zur Verfügung haben. Dort gibt es dann Farbtemplates, die du verwenden kannst und die nicht auf spezielle Designvorlagen begrenzt sind, wie dass bei anderen Systemen der Fall ist, sondern die du auf jedes Design anwenden kannst. Eine Farbvorlage ändert alle verwendeten Farben deines Designs (Schriften, Navigation, Hintergrund, Linien). Natürlich kannst du danach immer noch jede Farbe anpassen. Bevor du diese Möglichkeit nutzen kannst, wird aber noch etwas Zeit vergehen.

Position der Navigation

Ab sofort kannst du eine Navigation innerhalb eines Headers platzieren. Zum einen ermöglicht das uns, bestimmte alte Vorlagen zu konvertieren und du hast natürlich noch mehr Möglichkeiten, deine Webseite zu gestalten. Ab sofort ist die Position, wo die Navigation sich aktuell befindet, in grün (1) markiert. So weisst du immer, woher du kommst. Alle Positionen innerhalb eines Headers sind mit einem Pfeil (2) markiert. Alle anderen (3) haben keine zusätzliche Markierung. Navigationen im Header haben keinen eigenen Hintergrund und werden immer durchsichtig dargestellt. Je nach Navigations-Template ist es aber möglich, einen Hintergrund im Template selbst zu vergeben, der natürlich auch angezeigt wird.

Optionen für horizontale Navigationen

Zusätzlich hast du ab sofort die Möglichkeit, Abstände für eine Navigation frei zu vergeben und zu bestimmen, ob die Navigation links, rechts oder mittig angezeigt werden soll. Das gilt aber nur für horizontale Navigationen und nicht für Navigationen in der Sidebar. Du kannst diesen Dialog unter dem neuen Punkt "Optionen" (1) auswählen.

In diesem Dialog findest du folgende Möglichkeiten:
1) Hier kannst du frei eingeben, welchen "Innenabstand" du haben möchtest. Negative Werte sind natürlich nicht möglich. Wenn du eine Navigation unten im Header platzierst, dann haben Werte für "Oben" keine Auswirkung. Du kannst lediglich bestimmen, wie weit die Navigation vom unteren Rand des Headers entfernt sein soll und die linken und rechten Abstände. Umgekehrt bleibt der Wert für "unten" ohne Wirkung, wenn die Navigation oben im Header platziert wird.
Ist deine Navigation außerhalb des Headers platziert, kannst du mit diesen Abständen erreichen, dass der Bereich der Navigation (das umschließende Div-Element) sich ausdehnt. Gibst du zum Beispiel einen Abstand von oben von 50 px an, dann wird der Bereich um 50 px in der Höhe erweitert und die Navigation selbst ist dann am unteren Rand angeordnet. Hinterlegst du den Navigationsbereich mit einem Bild, kannst du so quasi einen "Pseudo-Header" simulieren.
2) Mit der Ausrichtung (2) bestimmst du, wie die Elemente der Navigation angeordnet werden sollen. Einfach mal ausprobieren, dann siehst du selbst, wie diese Option wirkt.

Unsere "alten" Vorlagen

Wenn wir nächste Woche die ersten neuen Vorlagen online stellen, werden wir auch einige der alten Vorlagen, die wir konvertiert haben, aktivieren. Damit bekommst du weitere "Basis-Vorlagen" aus denen du dann ganz einfach dein eigenes Design erstellen kannst. Du findest diese unter dem Menü "Classic" (1). Jede Vorlage hat eine Nummer. 60-8 bedeutet, dass ist das Layout 60 und die Designvorlage Nummer 8. Natürlich sind alle diese Vorlagen responsive und entsprechen unserem neuen System, auch wenn sie optisch genauso aussehen wie die alten Vorlagen. Du kannst also alles damit machen wie auch mit den editierbaren Vorlagen oder den ganz neuen Designvorlagen.

Unsere neuen Vorlagen

Die neuen Vorlagen werden unter dem Menü "Design" veröffentlicht. Alle Vorlagen haben einen Namen. Aktuell verwenden wir dazu Begriffe aus dem Bereich Astronomie. Also Namen von Sternen, Sternzeichen, Galaxien usw. Wenn es neue Vorlagen gibt, werden wir diese natürlich auch vorstellen. Wie gesagt, die ersten Vorlagen werden nächste Woche veröffentlicht.

Unser Entwicklerteam geht dann erstmal 3 Wochen in den wohlverdienten Urlaub und wird danach erholt und mit Schwung daran gehen, weitere tolle Funktionen fertigzustellen. Es wird also im August etwas ruhiger werden aber ich denke, dass Team hat den Urlaub wirklich verdient.

So, dass war es für heute, nächste Woche gibt es vielleicht noch eine kleine Erklärung zu den dann folgenden Funktionen. Eventuell werden wir dann schon den Converter vorstellen. Das hängt davon ab, wie die aktuell laufenden Tests werden.

Bis dann
Manfred F. Schreyer