Rückblick 2015

Liebe Freunde von page4
auf unserem Blog haben wir einen Rückblick auf das Jahr 2015 veröffentlicht und freuen uns natürlich wie immer über eure Kommentare.

Wir arbeiten daran, dass neue Artikel auf unserer Seite automatisch angezeigt werden, sobald ihr eure Webseite zum Bearbeiten aufruft. Aktuell wird noch dieser Blog angezeigt, so dass wir hier einen kleinen Hinweis bringen müssen, damit ihr automatisch informiert seid.

Wir wünschen euch in jedem Fall einen besinnlichen Jahresausklang und ein gesundes, erfolgreiches 2015

Euer page4 Team

Inhalte im Hintergrund erstellen und bearbeiten

Es gibt einen neuen Blogartikel auf unserer Webseite. Du erfährst dort, welche Möglichkeiten man hat, Inhalte unsichtbar für Besucher zu erstellen.

Viel Spaß damit
Manfred

Runde Bilder mit page4

Eine runde Sache
unter diesem Thema stellen wir euch ein paar neue, feine Funktionen vor. Mehr Infos auf unserer Webseite page4.com

Viel Spaß
Manfred und das page4 Team

Bilder mit Biss

Hallo liebe page4 User
auf unserem Blog gibt es einen neuen Artikel, in dem wir Euch darüber informieren, dass wir rund 600 neue Motive in unserem Bildarchiv zur Verfügung stellen.
Außerdem zeigen wir euch drei Webseiten, wo es kostenlose Bilder für eure Webseite gibt.

Viele Grüße
Manfred F. Schreyer
page4

Stehende Navigation mit page4

Liebe page4 User
auf unserem Blog bei page4 gibt es eine Anleitung, wie ihr aus einer normalen horizontalen Navigation eine stehende Navigation macht.

Kommentare und Fragen bitte dort. Dieser Blog ist noch so lange aktiv, bis wir unseren neuen Blog in unser System eingebunden haben so dass ihr dann beim Einloggen sofort sieht, wenn es was neues gibt.

Gruß Manfred

Neue Webseite und neuer Blog

Liebe page4 User

Ab sofort ist unsere Webseite unter http://de.page4.com erreichbar und erscheint in einem neuen, zeitgemäßen Design. Mit dieser Umstellung werden wir zukünftig nur noch auf unserer Seite bloggen und bei Facebook Nachrichten hinterlassen.

Der Blog ist unter http://de.page4.com/_blog/ erreichbar. Wir würden uns über eine rege Teilnahme und viele Kommentare freuen.

Dieser Blog bleibt weiter online wird aber nicht mehr so oft aktualisiert. Es ist sinnvoller, alle Neuigkeiten direkt auf unserer Seite zu veröffentlichen.

Vielen Dank
Manfred F. Schreyer

Update Herbst 2015 - 1

Hallo liebe User
so langsam beginnt der "heisse" Jahresendspurt ;)

Wir haben heute morgen ein neues Update hochgeladen. Darin haben wir einige Fehler, die wir gefunden haben, behoben. Im Chrome war es anscheinend nicht möglich, neue eigene Farben anzulegen obwohl die Farbpalette nicht voll war. Das sollte nun behoben sein. Bei der Auswahl von Bildern aus der Bildverwaltung gab es Darstellungsprobleme, wenn die Ordnernamen sehr lang waren. Auch das ist behoben. Und einige Kleinigkeiten mehr.

Dann haben wir bereits alle Vorbereitungen hochgeladen, damit wir bald eine neue Funktion online stellen können. Diese Umstellung wird dazu führen, dass ihr nur noch eine Palette mit Inhaltselementen habt und die Palette für die Sidebar entfernt wird. Der Grund ist ganz einfach. Mit Abschluss dieser Umstellung kann man dann jeden Inhalt sowohl in der Sidebar als auch auf der Seite benutzen. Man kann dann auf der einen Seite ein Kontaktformular in die Sidebar einbauen oder auf der anderen Seite eine Linkliste direkt auf der Seite verwenden. Diese "Freiheit" erfordert dann aber auch, dass ihr selbst darauf achtet, dass genügend Platz vorhanden ist. Wenn eure Sidebar nur 150 Pixel breit ist,  dürfte das kein guter Platz für ein Kontaktformular sein.

Alle Inhaltselemente sind ab sofort auch komplett responsive. Das bedeutet, wenn ihr ein Element in die Sidebar legt und die Sidebar in der Breite verändert, passt sich das Element entsprechend an.

Die ersten "Auswirkungen" dieses Updates könnt ihr im Inhaltselement Galerie sehen. Ihr findet dort einen im Moment noch wirkungslosen Button mit der Bezeichnung "Classic Galerie".  Angelegt unter dem Punkt "Plugin". Sobald die Umstellung abgeschlossen ist, wird es nur noch eine Galerie in der Palette geben und die anderen Galerien findet ihr dann unter dem Bereich "Plugin" als Button. Wählt ihr eine Galerie-Art aus, ändern sich unter Umständen die Optionen, da jede Galerie eigene Optionen hat. Euer Vorteil: Ihr könnt jederzeit von einer Galerie zu einer anderen Galerie wechseln ohne dafür die Bilder neu einzuladen oder eine neue Galerie anlegen zu müssen.
Für Premiumkunden werden wir die Anzahl der Galerie-Versionen baldmöglichst erhöhen.

Zum anderen findet ihr nun im Kontaktformular die Möglichkeit, ein Element "Abstand" einzubauen. So kann man das Formular viel schöner gestalten. Du kannst zwischen jedem Element einen Abstand einfügen und selbst bestimmen, wie groß dieser Abstand sein soll.

Wenn ihr Bildelemente auf einem Header platziert (als Premiumkunde) dann wird als Platzhalter jetzt unser neues Logo angezeigt. Platzhalter-Elemente werden nicht in der Besucheransicht angezeigt, sondern dienen lediglich dazu, ein angelegtes Element anzuzeigen und anfassen zu können.

Ergänzung: Auf Wunsch einiger User kann man jetzt auch alle Footer auf eine Höhe von bis zu 500 px bringen. Sobald wir in der Lage sind, weitere Inhalte für Footer und Header anzubieten wird man sehen, welche tollen Möglichkeiten man hat und dass 500 px wirklich mehr als genug Platz sind.

Mehr in Kürze

Gruß Manfred F. Schreyer

Wichtige Warnung für unsere Kunden

Liebe page4 User

bitte unbedingt beachten, wenn Sie eine Premium-Version bei uns haben. Vautron ist die Registrierungsstelle, wo wir unsere Domains registrieren. Es scheint, dass auch Kunden von uns solche Emails erhalten. Bitte keinesfalls auf irgendwelche Links klicken. Einfach sofort löschen.

Gruß Manfred F. Schreyer

1.  WARNUNG: Phishing-Versuch im Namen der Vautron Rechenzentrum AG

derzeit befinden sich Phishing-Mails in Umlauf, die unberechtigt in

unserem Namen versendet werden. Adressaten sind die Registranten der

Domains, die sich in unserer Verwaltung befinden.

Darin wird behauptet, dass eine Verletzung unserer Abuse Policy

stattgefunden hätte und die Domains aus diesem Grund dekonnektiert werden.

Ein Beispiel:

-- snip --

Dear ,

The Domain Name have been suspended for  violation of the

Vautron Rechenzentrum AG Abuse Policy.

Multiple warnings were sent by Vautron Rechenzentrum AG Spam and Abuse

Department to give you an opportunity to address the complaints we have

received.

We did not receive a reply from you to these email  warnings so we then

attempted to contact you via telephone.

We had no choice but to suspend your domain name  when you did not respond

to our attempts to contact you.

Click here and download a copy of complaints we have  received.

Please contact us for additional information  regarding this notification.

Sincerely,

Vautron Rechenzentrum AG

Spam and Abuse Department

-- snap --

Ziel der Mails ist, den User dazu zu bringen, das in der Mail verlinkte

Malware-File auszuführen.

Bitte ignorieren Sie diese Mails und klicken Sie keinesfalls auf den Link.

Letztes Update vor Sommerpause

Letztes Update Version 2015

Liebe User, am Dienstag, den 4. August wird im Laufe des Tages ein weiteres, vorerst letztes Update online gehen, nachdem die bisherigen Updates anscheinend alle soweit wir das beurteilen können, weitgehend fehlerfrei funktionieren.

In diesem Update dreht es sich vor allem um das Konvertieren alter Vorlagen. Damit ist es nun möglich, dass jeder, der ein altes Design hat, auch die neuen Funktionen ausprobieren kann und ohne seine aktuelle Seite zu verändern in Ruhe die neuen Vorlagen testen und sich ein modernes Design erstellen kann. Wer andere Webbaukästen kennt, weiss, dass es bei so extremen Veränderungen wie wir sie vorgenommen haben, normalerweise nicht üblich ist, alte Technik zu konvertieren. Man hat dann entweder die Möglichkeit, beim alten Stand der Technik zu bleiben oder den Sprung ins kalte Wasser zu wagen. Wir haben einen Weg gefunden, diesen Spagat zu wagen und wir denken, ihr werdet damit zufrieden sein.

Da wir für jede alte Vorlage einen Konverter schreiben mussten und diese zusätzlich noch je nach Style angepasst werden mussten, gibt es noch nicht für alle Vorlagen Konverter. Da es allerdings bei einigen Designvorlagen sowieso technisch unmöglich ist, diese in das neue System zu transformieren, haben wir den Konverter so gebaut, dass er in jedem Fall deine alte Webseite konvertiert. Wie geht das?

Nun, ist ein Konverter vorhanden, liest das System die Daten aus und baut deine Webseite so gut es geht um und konvertiert alles in die neue Technik. Bei vielen Vorlagen ist das Ergebnis zu 100% identisch mit dem Original.

Enthält das Layout, zu dem deine Webseite gehört, Designvorlagen, die mit speziellen Grafiken ausgestattet sind - wie zum Beispiel beim Layout 20 die Styles 3, 4, und 5 dann wird versucht, die Abmessungen zu übernehmen und die Farben und ein möglichst ähnliches Design zu erstellen. Du wirst im neuen Editor solche speziellen Grafiken leider nicht wieder einbauen können. Das ist von der Technik her nicht vorgesehen und würde sich auch mit dem Ziel nicht vertragen, alle neuen Vorlagen für Mobilgeräte zu optimieren. Willst du auf solch ein Design nicht verzichten, kannst du leider die neuen Funktionen nicht nutzen.

Für folgende Layoutvorlagen gibt es bereits Konverter und du kannst davon ausgehen, dass deine Seite relativ gut konvertiert werden kann, sofern keine speziellen Grafiken im Design benutzt werden. Grafiken wie oben bei Layout 20 erwähnt oder Schmuckrahmen, die wir in einen Vorlagen verwendet haben. Solche grafischen Elemente sind bei modernen Seiten nicht mehr üblich.

Es gibt Konverter für die Layoutvorlagen 1, 2, 3, 5 20, 21, 23, 40, 41, 60, 61, 62, 63, 64, 65, 66, 67, 80, 81, 82, 100, 101, 102, 120, 121, 122, 140, 141, 142, 160, 161, 162, 180, 181, 182, 200, 201, 202, 220, 221, 222 und 1.000. Die Vorlage 1.062 ist nur teilweise fertig, geht aber trotzdem online.

Damit sind alle Basisvorlagen mit Konverter versehen. Die fehlenden Vorlagen 500, 501, 502, 510, 511, 545 und 550 werden wahrscheinlich keinen eigenen Konverter bekommen. Hast du so ein Layout, kannst du natürlich trotzdem den Konverter nutzen. Das System erstellt dann aber keine Vorlage, die deiner Webseite möglichst ähnlich ist - weil es keine Konverter Informationen gibt - sondern es wird einfach ein Standardlayout generiert, damit du in den neuen Editor einsteigen kannst.

Bei einigen Layoutvorlagen, insbesondere den Sonderlayouts ist ein Konvertieren aktuell nicht möglich. Wir bitten um Verständnis, dass ihr in diesem Fall leider noch keine Möglichkeit habt, auf einfache Weise umzusteigen.

Neue Konverter werden erst im September veröffentlicht werden, da wir im August einfach eine Pause brauchen.

So kommst du an den Konverter

Wenn du ein altes Design verwendest und den Menüpunkt Design (1) aufrufst, findest du nun an erster Stelle einen neuen Eintrag "Design konvertieren (Beta)" (2). Wenn Du eine Kaufversion hast, dann hast du den Menüpunkt "Design speichern" (4). Wenn du dir nicht sicher bist, speichere dein vorhandenes Design einfach ab. Solltest du das Design konvertiert und gespeichert haben, hast du eventuell keine Möglichkeit mehr, dein altes Design auszuwählen und deine Einstellungen sind in jedem Fall weg. Wenn du das Design gespeichert hast, kannst du einfach auf "Designvorlage auswählen" (3) klicken und aus der Ablage dein gespeichertes Design neu laden.

Wenn du diesen Menüpunkt aufrufst, kommt noch ein Dialog vorweg, um dich auf die wichtigsten Punkte hinzuweisen. Der Link dort führt  zu diesem Blog-Artikel. Bestätige, dass du verstanden hast, was passiert, wenn du den Konverter benutzt und klicke auf "Weiter". Nun wird deine Webseite konvertiert und dann öffnet sich der neue Editor und du kannst alle Möglichkeiten dieses Editors auf deine Webseite anwenden.

Wichtiger Hinweis, unbedingt lesen!

Ganz wichtig: Bitte beachte, solange du nicht auf den "Speichern Button" oben rechts klickst, sind alle Veränderungen nur temporär und haben keine Auswirkungen auf deine aktuelle Webseite. Du kannst jederzeit, egal was du alles ausprobierst, den Editor beenden, indem du auf "Schließen" klickst und alles wird verworfen und du kommst zurück zu deinem aktuellen, alten Design mit allen deinen manuellen Einstellungen. In dem Moment, wo du den "Speichern Button" benutzt, wird dass im Editor vorhandene Design in die Datenbank übertragen und alle Besucher deiner Webseite sehen sofort dieses neue Design, da die Darstellung der Webseite aus der Datenbank generiert wird. Dieser Schritt lässt sich nicht mehr rückgängig machen. Die einzige Möglichkeit, wieder an dein altes Design zu kommen besteht darin, es aus der Ablage zu laden. Natürlich nur, wenn du es vor dem Konvertieren abgespeichert hast. Du kannst dir beim Gestalten deiner Webseite im neuen Editor Zeit lassen. Solange eine stabile Internetverbindung besteht wird alles temporär gespeichert ohne Auswirkungen auf deine Webseite. Die Live Vorschau ist ebenfalls temporär und steht in keiner Verbindung zur aktuellen Webseite. So siehst du genau, wie deine Seite aussehen würde und kannst wie gesagt, in Ruhe alles gestalten, einstellen und ausprobieren.

Zusätzliche Optionen

Bei den alten Designvorlagen gab es zwei "Arten" von Sidebars. Entweder war die Sidebar immer nur so lang wie der enthaltende Inhalt. Egal, wie viel Inhalt du im Hauptbereich der Webseite angelegt hast. Oder die Sidebar war immer genauso hoch wie dein Inhaltsbereich. Damit du selbst entscheiden kannst, was du möchtest, gibt es unter dem Bereich "Elemente" jetzt eine zusätzliche Option.

Ganz rechts findest du jetzt "Sidebarhöhe" (4). Diese Option funktioniert natürlich nicht nur mit konvertierten Vorlagen sondern generell. Klickst du auf Minimal, wird die Sidebar immer nur so hoch, wie der Inhalt es notwendig macht. Klickst du auf Maximal, wird die Sidebar immer so hoch, dass sie genauso hoch wird wie der Hauptbereich deiner Webseite, also da wo der normale Inhalt eingebaut wird. Du kannst beide Sidebars getrennt einstellen.

Neue Design-Vorlagen

Mit diesem Update werden auch die neuen Design-Vorlagen aktiviert. Bisher haben wir zwar nur 7 Vorlagen fertig, aber weitere werden in Abständen folgen. Ein Mitbewerber hat zum Beispiel bei seinen neuen System 35 Vorlagen und da man bei diesem System die Farben nicht komplett frei einstellen kann und weder die Breiten verändern, noch Elemente ein- oder ausblenden kann, gibt es zu jeden Design leichte Variationen wie andere Farben oder eine etwas andere Aufteilung. Trotz der 35 Vorlagen wirbt dieser Anbieter damit, dass es mehr als 150 neue Design-Variationen gibt. Wenn wir berücksichtigen, was du aus jeder Vorlagen machen kannst, könnte man theoretisch also behaupten, dass die neuen Vorlagen mehr als 1.000 Design-Variationen ermöglichen. Das hört sich doch richtig gut an, oder? Aber keine Angst, wir werden trotzdem weitere Vorlagen erstellen und veröffentlichen.

Außerdem gibt es weitere, "alte" Vorlagen, die wir konvertiert und neu abgespeichert haben, ohne sie stark zu verändern. So kannst du mit einem Klick auf alte Vorlagen zurückgreifen, um diese dann anzupassen. Und alle diese alten Vorlagen sind natürlich modern und für mobile Ansichten optimiert, sofern du diese Option auch anschaltest.

Wir hoffen, diese "letzten" Funktionen ermöglichen nun allen, die eine page4 Webseite haben, auf das neue System umzusteigen und ohne Stress ein neues Design für ihre Webseite zu erstellen. Viel Spaß damit und wir freuen uns über jeden Kommentar auf diesem Blog, unserer Facebook Seite und natürlich auch gerne per Email. Auch wenn unser Entwickler-Team in den wohl verdienten Urlaub geht, wird unser System technisch betreut und der Support steht auch zur Verfügung. Wir hoffen, dass alles klappt.

Viel Spaß
Manfred F. Schreyer und das Team von page4

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

Update 2015 - letzter Teil

Update 2015 - jetzt für alle User verfügbar

Ganz wichtig:Um die neuen Funktion inkl. der mobilen Ansicht nutzen zu können, muss man ein editierbares Design verwenden. Ihr findet das wenn ihr eine Designvorlage auswählt.

Solltest du nicht wissen, welches Design du hast, einfach auf die Auswahl gehen und dann wird immer das aktuelle Design angezeigt. Es ist leider nicht möglich, die neuen Editierfunktionen und die mobile Ansicht für alte Vorlagen zu verwenden, da diese völlig anders aufgebaut sind.

Wenn du von einem alten zu einem editierbaren Design wechselt, wird das leider sofort auf deine Webseite angewendet. Beim Wechsel verlierst du alle individuellen Einstellungen vom Design (eigenes Headerbild, Farben, Schriften). Deine Inhalte, auch Inhalte, die auf dem Header platziert sind, bleiben erhalten. Du musst dann das neue Design editieren und die alten gewünschten Bilder wieder auswählen und das Design anpassen. Leider gibt es keinen anderen Weg. Wenn du unsicher bist, hole dir eine kostenlose Seite und probiere einfach aus, deine aktuelle Webseite mit einem editierbaren Design nachzubauen.
Einige alte Vorlagen sind leider so speziell, dass man diese nicht nachbauen kann. 

So kommen wir jetzt zum neuen Update. 

Weitere Informationen und Anleitungen findest du in den Blogeinträgen der letzten Wochen.

Mit dem vorerst letzten Teil schalten wir das Update gleichzeitig auch für alle unsere Kunden frei. Ab sofort können Nutzer der Premium- und Professionalversion alle neuen Funktionen nutzen. Rückmeldungen sind willkommen und helfen uns, vielleicht noch bestehende Bugs schnell zu beheben. Mit dem letzten Update werden weitere Funktionen freigeschaltet.

Die wichtigste Funktion ist, dass es jetzt einen weiteren Menüpunkt gibt, die Vorlagen (1). Hier findet ihr im ersten Schritt alle editbaren Designvorlagen unter dem Punkt Classic (2) vereint. Jedes Design hat zukünftig einen Namen. Bei den bereits seit langen verfügbaren editierbaren Vorlagen haben wir die Nummerierung als Name genommen, damit ihr sofort wisst, welche Vorlage gemeint ist. Der Name besteht zum einen aus der Nummer der Vorlage, also 10.000 und zum anderen aus der Nummer des Designvorschlags, der in der alten Auswahl rechts angezeigt wurde. Zusammengesetzt ergibt dass dann zum Beispiel die Bezeichnung 10.000-2 was bedeutet editierbare Vorlage 10.000 und zweiter Designvorschlag.

Die neuen Designvorlagen werden wir mit Namen aus der Astronomie bezeichnen, also mit Namen von Planeten, Galaxien und Sternen. Dabei werden wir internationale Namen verwenden, so dass diese unverändert auch in der englischen Version genutzt werden kann. Die neuen Vorlagen werden einen eigenen Bereich erhalten unter oder über dem Punkt Classic.

Sobald wie möglich, werden wir die ersten neuen Vorlagen veröffentlichen und dann ständig erweitern. Wir arbeiten aktuell noch an einer völlig neuen Funktion, die es unseres Wissen bei keinem anderen Baukasten gibt und müssen dazu noch bestimmte Tests vornehmen und einige Dinge abstimmen. Wenn diese Tests abgeschlossen sind, können wir Euch  diese Ideen vorstellen. mehr möchten wir noch nicht verraten.

Wenn du noch eine alte Vorlage verwendest kannst du leider die neuen Bearbeitungsmöglichkeiten nicht nutzen. Entweder stellst du dein Design um, indem Du einfach ein editierbares Design nimmst und dann kannst du sofort in den neuen Bereich und wenn vorhanden, auch ein ganz neues Design auswählen und mit den neuen Möglichkeiten ein vorhandenes editierbares Design anpassen. Der Nachteil dabei ist, sobald du ein neues Design ausgewählt hat, ist es sofort sichtbar und deine Besucher sehen zwar die Inhalte aber ein völlig neues, nicht personalisiertes Design. Solange, bis du die Farben angepasst und die eigenen Bilder wieder eingebunden hast und dann auf Speichern drückst.

Wenn du das nicht möchtest, musst du so lange Geduld haben, bis wir deine alte Designvorlage überarbeitet und einen Konverter geschrieben haben. Ab dem Zeitpunkt wird dann sofort, wenn du deine Seite bearbeiten willst, die konvertierte Version geladen und die neuen Funktionen sind verfügbar. Leider ist so ein Konverter sehr komplex, weil wir sicherstellen müssen, dass deine Seite danach genauso aussieht. Daher ist schwierig zu sagen, wann wir die ersten alten Vorlagen über einen Konverter in das neue System einfügen können. Einige Vorlagen werden leider nicht konvertiert werden. Das betrifft alle die Designvorlagen, die grafische Elemente zur Gestaltung benutzen. Diese Vorlagen sind nicht kompatibel, da es unmöglich ist, daraus eine für mobile Geräte optimierte Version zu machen.

Meine Empfehlung ist, den Sprung zu wagen und im Zweifel für einige Stunden die Wartungsseite anzuschalten. Es lohnt sich wirklich umzustellen. Warum registrierst du keine zweite kostenlose Seite und baust damit einfach deine Premiumseite nach, ohne Inhalte, nur das Design. Dann weist du genau, was du mit deiner Kaufversion machen musst, damit das neue Design schnell online ist und du erkennst sofort, wenn der Umbau nicht möglich ist.

Neben dieser neuen Funktion haben wir vor allem die gemeldeten Bugs beseitigt und das optimiert, was uns selbst noch aufgefallen ist.

Bis bald und solange viel Spaß
Manfred F. Schreyer

Update 2015 - Responsive 1

Update 2015 - Teil 2

Liebe Freunde von page4

soeben wurde ein weiteres Update für alle kostenlosen Versionen hochgeladen. Dies ist ein letzter Zwischenschritt, bevor wir das Update komplett haben und es dann auch für alle Kaufkunden, also Nutzern der Premium und Professional Version freigeben können.

Neben einigen kleinen Erweiterungen und natürlich der Beseitigung der von Euch gemeldeten Bugs sorgt das Update dafür, dass alle editierbaren und natürlich auch die etwas später nach dem kompletten Update folgenden neuen Vorlagen automatisch eine Version für mobile Geräte abbilden. Im Gegensatz zu manchen anderen Baukästen ist das kein zusätzliches Design, was ihr selbst gestalten müsst oder wo es von Anbieter nur ein paar Variationen zur Auswahl gibt. Die Umstellung auf Mobile Ansicht geschieht vollautomatisch mit dem Design, was ihr gestaltet habt. Wir sorgen dafür, dass die mobile Version eine vernünftige Navigation hat, die leicht auf einem mobilen Gerät bedient werden kann und dass die Inhalte deiner Webseite optimiert dargestellt werden. Aktuell habt ihr keine Möglichkeit, dass Aussehen der mobilen Navigation anzupassen. Es wird später sicher für Premiumkunden gewisse Anpassungen wie die Farbdarstellung geben. Bei einem mobilen Gerät dient die Navigation vorrangig dazu, schnell und einfach alle Seiten ansteuern zu können und nicht als Gestaltungselement.

Das Update funktioniert so, dass ab einer Darstellungsbreite von 480 px von der normalen auf die mobile Version geschaltet wird. Dabei blenden wir dann vorhandene Sidebars samt Inhalt aus, da keine vernünftige Darstellung deiner Inhalte bei 480 px möglich ist, wenn du links und/oder rechts eine Sidebar hast, die schon die Hälfte (200 px) von Platz wegnimmt. Die Navigation in einer Sidebar wird natürlich dann in die mobile Navigation integriert, man kann immer auf alle Seiten zugreifen.

Eine Blognavigation wird aktuell ausgeblendet. Es wird sicher eine Lösung geben, den Blog dann automatisch in die mobile Navigation einzubinden.

Wichtig ist, dass ihr die mobile Ansicht anschalten müsst. Standardmäßig ist diese abgeschaltet. Einfach auf Design editieren und dort findet ihr dann einen Menüeintrag "Mobile".

Unter (1) ist der Menüeintrag, womit ihr zum Bereich kommt. Mit dem Schalter (2) kann man die mobile Ansicht an oder ausschalten. Das ist natürlich unabhängig vom Design, solange es ein editierbares oder neues Design ist. Einmal angeschaltet, bleibt es an, auch wenn ihr euer Design ändert. Unter (3) findet ihr einige Erklärungen dazu.


So sehen Webseiten in normalen Modus

und so im Mobilmodus aus:

Die Navigation wechselt zu einer mobilen Version, die oben durch drei Striche angezeigt wird. Dieser Bereich ist klein genug um nicht zu stören und groß genug, damit der User mit dem Finger die Navigation aufklappen kann. Dabei wird dann eine benutzerfreundliche Navigation angezeigt, die du unten im Bild siehst.

Wie du schön am Header sehen kannst, verkleinern wir diesen Bereich automatisch so, dass weiterhin alles sichtbar ist. Das sorgt dafür, dass deine Seite möglichst dem Original entspricht und trotzdem auf dem iphone und co bedient werden kann.

Hier also die Version der Mobilnavigation:

Dabei ist (1) der Punkt, wo du die Navigation schliessen kannst. Bei (2) werden alle Hauptseiten angezeigt und bei (3) zeigt ein Dreieck, dass hier Unterseiten sind.

So sieht das eine Ebene tiefer aus. Mit (1) kommst du jetzt eine Ebene zurück. (2) Zeigt die Hauptseite an, zu der (3) die Unterseiten angezeigt werden und (4) zeigt, dass die eine Unterseite weitere Unterseiten hat.

So kann man durch jede Webseite navigieren, egal wie viele Ebenen und wie viele Seiten vorhanden sind. Da einige User von page4 hunderte oder sogar tausende Seiten haben, brauchen wir ein System, das auch damit umgehen kann.

Sidebar-Elemente

Wir haben noch eine weitere Funktion eingebaut, die Bedienoberfläche wird aber noch "verbessert". Statt der Auswahlboxen kommen dort blaue Schaltflächen hin:

Damit kann man entscheiden, auf welcher Seite welche Inhalte sein können. Dazu gibt es zwei Optionen. In der Sidebar kann man aktuell ja folgende Inhalte platzieren:
a) Die Unternavigation. Dies wird direkt von der Navigation geregelt.
b) Die Blognavigation. Diese kann man jetzt frei positionieren, entweder links oder rechts.
c) Der Sidebar Inhalt, also eigene Texte und Bilder. Auch das kann jetzt frei platziert werden.

Aktuell aber nur entweder oder, leider kann man nicht beide Sidebars mit eigenen Inhalten füllen. Wird kommen, aber dauert und wird dann auch nur für die Premumversion sein.

Das obige Bild zeigt, dass man den entsprechenden Inhalt ausschalten oder links oder rechts platzieren kann. Wenn die Benutzeroberfläche angepasst ist, wird dann dann auch nur stehen: aus - links - rechts (so wie bei den Elementen die man an und ausschalten kann.) Die Technik hinter diesen Elementen ist aber aufwändiger, daher erstmal so, dann könnt ihr das schon nutzen und wenn Zeit ist, bauen wir dass um. Dann wird die Bedienung noch besser.
Die eine Auswahlbox regelt die Blognavigation, die andere die Inhalte.

So, das wäre es für heute. In Kürze wird es im  Bereich der Designbearbeitung die Möglichkeit geben, alle editierbaren Vorlagen direkt auszuwählen. So könnt ihr beim Bearbeiten eine neue Vorlage auswählen und testen (solange ihr nicht speichert). Neue Vorlagen werden wohl erst später geliefert. Es ist jetzt wichtig, dass wir das gesamte Update freigeben, damit alle Versionen die gleiche Basis haben. Wir gehen davon aus, wenn die Premiumkunden die neuen Funktionen nutzen, wird es weitere Rückmeldungen geben. Das demnächst folgende Update schließt das große Update 2015 erstmal ab und wie gesagt, es wird dann möglich sein, nach und nach Verbesserungen zu veröffentlichen, neue Designvorlagen zur Verfügung zu stellen und mehr.

Wenn ihr ganz alte Vorlagen verwendet, müsst ihr leider ein neues Design wählen, damit ihr alle Vorteile habt. Der Umbau geht eigentlich relativ gut. Das einzige Problem ist nur, dass ihr nach dem Auswählen einer neuen Vorlage eure Seite sofort so angezeigt wird. Entweder schaltet ihr eine Wartungsseite ein, dann sehen die Besucher nur diese Seite oder ihr müsst damit leben, dass die Seite dann solange so zu sehen ist, bis ihr das neue Design angepasst habt. Wir arbeiten daran, die Möglichkeit zu schaffen, einen Teil der alten Vorlagen automatisch zu konvertieren. Wann das kommt und wie das geht, ist noch offen.

Erstmal viel Spaß mit euren mobilen Seiten.

Ach ja, etwas noch:
Wenn ihr die Seite dann bei Google testet, gibt es für folgende Dinge Punktabzug und wir können da nichts machen:
Eingebundene HTML Scripte für Wetter, Zähler oder was auch immer.
Eingebundene Facebook Tools (gilt auch für andere sociale Netze)
Wir haben keinen Einfluss darauf, weil der Code nicht von uns ist.

Wir wollen euch ja bald Google Fonts anbieten. Auch da ergibt sich ein Problem. So wie wir das einbinden, werden alle Fonts so geladen, dass die Seite sofort in der Google Schrift angezeigt wird. Das führt dazu, dass Google uns mit 20 Punkten Abzug bestraft.
Wenn wir das so einbinden, wie Google das will, dann gibt es keinen Abzug, aber dann wird die Webseite erst komplett mir der Standardschrift angezeigt und wenn alles geladen ist, werden die Fonts nachgeladen und man sieht, wie die Seite sich neu aufbaut und dann die Google Schrift zeigt.
Wir halten diese Lösung für absoluten Müll und glauben man sollte lieber mit dem Punktabzug leben. Dass sieht nur leider auch nicht gut aus.
Intern haben wir einen Account, der Google Fonts nutzt. Machen wir das nach unser Methode, ist der Aufbau der Seite perfekt und es gibt 75 Punkt von Google, das ist orange. Machen wir das wie Google es möchte, haben wir erst die Seite in Times, der eingestellten Standardschrift und dann wird die Seite neu geladen und in der Googleschrift gezeigt und wir haben 97 Punkte bei Google, also grün. Ob es eine Lösung gibt, Google und uns zufriedenzustellen kann ich noch nicht sagen. Im Zweifel würde ich lieber auf die beste Bewertung von Google verzichten und meinen Besuchern dafür eine optimale Seite zeigen. Wie steht ihr zu dem Thema?

Gruß Manfred

Update Navigation

Gestaltung der Schrift in einer Navigation

Ab sofort ist es möglich, neben den Farben auch die Schrift in einer Navigation an die eigenen Bedürfnisse anzupassen. Dabei ist zu beachten, dass die Schrifteinstellungen automatisch für alle Ebenen gelten und daher zentral über den Farbeinstellungen angeordnet sind.

Es gibt zwei Optionen:

a) Schriftart. Aktuell kann man aus den bereits vorhandenen Schriften eine beliebige für die Navigation auswählen. Je nach Schriftart fällt dabei die Schriftgröße unterschiedlich aus.

b) Schriftgröße. Man kann genau eine Schriftgröße einstellen und zwar zwischen 10 und 30 px.
Das System passt die Schriftgrößen für die einzelnen Unterebenen automatisch nach den Vorgaben der jeweiligen Navigation an. Du musst dich als User damit in keiner Weise befassen. Wir haben diesen Weg gewählt, weil es sonst viel zu kompliziert geworden wäre, für jede einzelne Ebene und jeden Zustand diese Werte manuell einzustellen. Außerdem macht es wenig Sinn und für nur sehr selten zu gut aussehenden Resultaten.

Ein paar Worte zu Google-Fonts

Sobald das Update komplett ist werden wir uns Gedanken machen, auch Google-Fonts einzubinden. Google-Fonts ermöglichen es, dass die Schriftdarstellung auf jedem Browser identisch ist, auch wenn der Besucher der Webseite diese Schrift gar nicht auf seinem Rechner hat. Das liegt daran, dass jede Google-Schrift direkt vom Server von Google geladen wird. Dieser Punkt ist auch der größte Nachteil, denn das Einladen von Schriftinformationen und anschließende Rendern (Berechnen der Darstellung) kostet Zeit. So kann es vorkommen, dass eine Webseite erst mit einer Standardschrift dargestellt wird und sobald im Hintergrund die Google-Fonts geladen sind, wird die Schrift ausgetauscht und die Webseite neu aufgebaut. Das hat uns bisher davon abgehalten, Google-Fonts zu verwenden.
Da aber immer mehr Baukästen diese Art der Gestaltung nutzen, werden wir das zukünftig auch anbieten. Wir versuchen, einen Weg zu finden, die Ladezeiten möglichst gering zu halten, da uns sehr daran gelegen ist, dass unsere User nicht ständig warten müssen, nur weil der Webseiten-Baukasten irgendwas im Hintergrund einladen oder speichern muss.
Bei der Auswahl von Designvorlagen und dem Abspeichern von Änderungen im Design ist uns das gut gelungen, denn verschiedene Tests zeigen, dass page4 rund 4 bis 10mal schneller damit ist als alle von uns getesteten Mitbewerber und dass ist schon ein enormer Unterschied. Wir möchten diesen Vorsprung natürlich nicht verlieren, nur weil wir Google-Fonts nutzen wollen. Die Optimierung auf Geschwindigkeit ist allerdings ein extrem aufwändiger Prozess, so dass wir nicht genau sagen können, wann wir soweit sind, Google-Fonts anzubieten. Wir tun unser Bestes.

Rückmeldungen zum Update
Unser Anspruch. page4 möglichst schnell zu machen, kollidiert manchmal mit der Notwendigkeit, User Rückmeldungen zu geben, dass eine Aktion wie Speichern auch ausgeführt wird. Daher haben wir das System durch einen zusätzlichen Dialog, den man bestätigen muss, "entschleunigt". Beim Video erstellen für das Update ist mir selbst schon aufgefallen, dass dieser zusätzliche Klick nervt und einige User haben das auch mitgeteilt.
Daraufhin haben wir uns nochmal intern damit auseinandergesetzt und einen Weg gefunden, den User zu informieren, ohne dass System zusätzlich zu verlangsamen. Wenn man jetzt eine Aktion ausführt wie Design speichern oder Änderungen zurücksetzen, dann wird diese Aktion ausgeführt und anschließend wird oben im Bereich, wo man die Menü-Einträge wie Speichern, Schließen usw. finden in grüner Schrift eine Rückmeldung über die erfolgte Aktion eingeblendet, so dass man in jedem Fall mitbekommt, was passiert, ohne darauf reagieren zu müssen. Diese Einblendung geschieht nach der Aktion und hat keinen Einfluss auf die Geschwindigkeit.

Außerdem konnten wir einige kleinere Bugs beseitigen und einige Vorgänge dank der Rückmeldung unserer User optimieren. Vielen Dank dafür. Wir hoffen daher, bald das endgültige Update freigeben zu können und sind dankbar für jeden Fehler, der gefunden wird. Manche Fehler haben nichts mit dem Designbereich zu tun, sondern sind Auswirkungen des Updates auf ganz andere Funktionen. So fehlte mit einem Mal die Möglichkeit, neue Elemente in der Sidebar anzulegen, wenn alle vorhandenen Elemente gelöscht worden sind. Dank aufmerksamer User konnten wir auch diesen Bug schnell beheben. Wenn Euch also irgendwas auffällt, egal wo ihr gerade mit page4 arbeitet, schickt uns bitte per Email eine Nachricht und wir kümmern uns umgehend darum

Bis dahin viel Spaß
Euer page4 Team

Video zum Update

Video zum Update 2015

Liebe User, das erste Video ist jetzt fertig, es ist aufgrund der vielen Optionen, die man unbedingt erklären sollte, relativ lang geworden, ich hoffe aber trotzdem es hilft, unser neues System besser zu verstehen und nutzen zu können.

Einige Anmerkungen zum Video:

Es ist in HD Auflösung und sollte wenn möglich auch in voller Auflösung angesehen werden, da ich nicht in einzelne Bereiche reinzoome, sondern das Video mehr oder weniger unbearbeitet verwendet habe. Ich habe lediglich einige Bereiche entfernt und gewisse Pausen oder Versprecher. Ansonsten hätte ich sicher noch Tage damit verbracht, es perfekt zu machen. Das ist meiner Ansicht nicht notwendig, es soll helfen, die Bedienung zu verstehen.

Die Bearbeitungsbereiche habe ich nicht im einzelnen erklärt, da diese grundsätzlich die bereits vorhandenen Funktionen enthalten, die nur eine andere Gestaltung erhalten haben. Wenn man ein eingebundenes Bild skalieren, positionieren oder wiederholen möchte, gibt es dazu jeweils Dialoge mit Erklärungen und eindeutigen Symbolen, so dass sich hier eine Videoerklärung erübrigt. Gleiches gilt für die Effekte bei Rahmen, also die Rundung oder wo der Rahmen platziert werden soll. Die Schatteneffekte haben keinen Dialog sondern die schon bekannte Auswahlbox. Die Effekte werden live gezeigt, sind aber nicht immer sichtbar weil die Abdunklung für den Bereich, der nicht bearbeitet wird die Effekte teilweise überdeckt. Da wir diesen Bereich (Schatteneffekte) sowieso neu bauen wollen, haben wir uns eine Anpassung gespart.

Auch die Schriften für ein Design habe ich nicht erklärt bzw. aus dem Video entfernt, da diese wie bisher funktionieren mit dem Unterschied, dass man nun live sieht, was sich ändert.

Ansonsten hoffe ich, dass Video gefällt Euch und hilft vor allen Dingen dabei, schnell mit dem neuen page4 klarzukommen.

Bis dann
Manfred F. Schreyer

Update 2015 online

Update für kostenlose Seiten online

Teil 1 unseres Updates ist ab sofort für alle kostenlosen deutschen Seiten verfügbar. Ausführliche Infos dazu in unseren Vorabinformationen hier im Blog.

Je intensiver ihr unser neues System benutzt, um so eher finden wir eventuell versteckte Bugs und umso schneller können wir diese beheben. Wir freuen uns daher sehr über Rückmeldungen von Euch. Sobald wie möglich wird es den zweiten Teil des Updates geben, der dann auch neue Designvorlagen und weitere Funktionen, wie zum Beispiel die Möglichkeit, die Schrift und Schriftgröße bei der Navigation zu ändern, enthalten wird.

Sobald das Update vollständig ist, wird es auch für alle Kunden verfügbar sein, die ein Premiumpaket nutzen. Verwendet Ihr bereits eine Kaufversion, könnt ihr Euch gerne mit einer zweiten Email eine kostenlose Version holen, um schon vorab die neuen Funktionen zu testen und uns dabei zu helfen, noch schneller fertig zu werden. Aufgrund des riesigen Umfangs sind wir leider gezwungen, dass Update in zwei Teile auszuliefern und zwischen den beiden Teilen etwas Zeit verstreichen zu lassen, um sicher zu sein, dass möglichst alle Bugs gefunden worden sind.

Viel Spaß also nun mit dem neuen page4. Ein Erklärvideo wird in Kürze folgen und Euch dann zeigen, wie ihr die neuen Funktionen sinnvoll nutzen könnt.

Das Bild oben zeigt eine page4 Seite die auf das Nötigste reduziert ist. Sie besteht aus einer Navigation und einem Bereich für Inhalte. Wir starten im Video mit diesem "Design" und zeigen Euch, was alles mit dem neuen page4 möglich ist mit nur einer einzigen Designvorlage.


Bis dann
Manfred F. Schreyer und das Team von page4 

Update 2015 - Teil 1 - Vorabinfos

Wichtige Informationen zum Update 2015 Teil 1

Jedes größere Update ist für Benutzer, die schon lange ein System nutzen, erstmal mit Aufwand verbunden. Die gewohnte Umgebung ist verändert und neue Funktionen hinzugekommen. Als Entwickler bewegt man sich immer auf einem schmalen Grat. Am liebsten möchte man alles neu machen, ohne Rücksicht auf den bisherigen Stand der Entwicklung. Das geht leider nicht, wenn man Kunden hat, die ein System nutzen. Wir haben versucht, mit dem Update diesen schwierigen Balance-Akt zu bewerkstelligen. Wir hoffen, Euch gefällt das neue System genauso gut wie uns.

Bevor in wenigen Tagen der erste Teil des Updates veröffentlicht wird, wollen wir einige Einblicke in das neue System geben um den Umstieg zu erleichtern. Insgesamt arbeiten wir seit fast einem Jahr rund um die Uhr an diesem Update. Ein Grund ist, dass wir die gesamte Datenstruktur verändert haben, um eine völlig neue Art der Bedienung zu ermöglichen und zukünftige Erweiterungen zu erleichtern. Beim Entwickeln haben wir mehrmals von vorne angefangen, weil es einfach nicht unseren Ansprüchen genügte und wir in tagelangen Diskussionen neue Wege gesucht haben. Es hat sich aber gelohnt.

Ein ganz wichtiger Hinweis:

Damit Ihr die neuen Funktionen nutzen könnt, braucht Ihr unbedingt ein editierbares Layout. Das findet Ihr, wenn Ihr auf Design auswählen geht, wie unten gezeigt.

1) Hier könnt Ihr das editierbare Layout auswählen
2) Rechts müsst Ihr dann eine der Designvorlagen wählen
3) Und dann auf Auswählen klicken.

Kleiner Hinweis: Nimmt einfach das erste Layout, also 10.000 und die erste Vorlage. Mit dem Design-Editor könnt Ihr so viel anpassen, dass es keine Rolle spielt, welches die Basis ist.

Anschließend könnt Ihr dann das Layout entsprechend editieren. Vorab sollte man sich vielleicht über die verwendeten Begriffe einig sein. Es gibt den Begriff Layout und den Begriff Design.

Layout = Damit bezeichnen wir die gesamte Struktur einer Webseite, also wie die Fläche aufgeteilt ist, ob und wo Sidebars sind, wo der Kopfbereich ist, ob es einen Fussbereich gibt usw.
Design = Damit bezeichnen wir die Möglichkeit, ein Layout mit "Leben"  zu füllen, es zu gestalten. Also Bilder, Farben, Rahmen, Effekte hinzuzufügen und die Größe der einzelnen Bereiche anzupassen und was noch damit zusammenhängt.

Im alten System hat man links das Layout, also die Struktur gewählt und rechts ein Design dazu. In der Vergangenheit war es mit page4 nicht möglich, die Struktur einer Webseite zu ändern, man musste dazu ein bestimmtes Layout auswählen. Außerdem konnte man die Größen nicht ändern und musste dazu ein neues Design wählen, wenn man ein größeres Headerbild haben wollte.

Mit den editierbaren Vorlagen hat sich das geändert und mit den neuen Bearbeitungsmöglichkeiten und den in Kürze folgenden neuen Vorlagen haben wir den Schritt vollzogen zu einem auf dem Markt einmaligen System.  Kein Webbaukasten ist in der Lage, dass zu bewerkstelligen, was page4 kann. Mit keinem anderen System kann man so einfach eine Webseite gestalten. Und damit meinen wir wirklich gestalten. Gestalten bedeutet, das Aussehen der Seite an die eigenen Wünsche anpassen. Die anderen Baukästen erlauben zwar eigene Bilder und eigene Farben und Schriften aber viel mehr nicht. page4 kann viel, viel mehr.

Wie kommt Ihr nun zu den neuen Bearbeitungsmöglichkeiten?

Einfach auf den ersten Menüpunkt "Design" klicken und wenn Ihr ein editierbares Design gewählt habt, dann sollte das Aufklapp-Menü so aussehen. Ihr sehr dort dreimal eine orange 1. Das bedeutet, ihr kommt mit allen drei Menüpunkten (Design editieren, Design-Schriften und Design der Navigation) in den neuen Editor. Am besten nimmt ihr allerdings den ersten Eintrag, dann kommt ihr zur allgemeinen Bearbeitung. Bei den anderen beiden springt Ihr direkt in die Tiefe an die entsprechende Stelle.

So sieht es aus, wenn Ihr direkt in den Editiermodus "springt:

Oben (1) befindet sich eine dunkelblaue Menüleiste mit verschiedenen Einträgen. Auf der linken Seite gibt es aktuell die Einträge "Elemente", "Hintergrund", "Schriften" und "Navigation". Wenn der zweite Teil des Updates kommt wird dort noch der Eintrag "Vorlagen" erscheinen, wo Ihr dann direkt neue Layouts und Designs auswählen könnt. Auf der rechten Seite gibt es die Einträge "Zurücksetzen", "Speichern" und "Schließen". Die hellblaue Fläche (2) enthält entweder Hinweise oder die Elemente mit denen Du alle Parameter Deiner Webseite einstellst.
Ganz unten siehst Du die (3) platziert über ein Element, welches mit einer gestrichelten Linie umrandet ist und eine Schraffierung enthält sowie mit einer halbtransparenten weissen Fläche belegt ist. Das ist das aktuell aktive Elemente, wo sich gerade die Maus befindet. Wenn Du auf so ein aktives Element oder besser auf so einen aktiven Bereich klickst, dann kommt ein Dialog, mit dem Du direkt zu den gewünschten Bearbeitungsoptionen springen kannst. Mehr dazu weiter unten.
Am besten erklären wir Euch kurz, was diese Menüeinträge in der dunkelblauen Leiste oben darstellen.

Elemente

Elemente: Hier kannst Du mit einem Klick Bereiche (1) des Layouts an- oder ausschalten. Wenn Du ein Bereich ausschaltest, wird er unsichtbar, verliert aber natürlich nicht die Inhalte, die in diesem Bereich von Dir angelegt sind. Unser System ist ziemlich intelligent. Nehmen wir an, Du hast oben eine Hauptnavigation, wo sich die Hauptseiten befinden und alle Unterseiten befinden sich in der ersten Sidebar. Wenn Du die erste Sidebar ausschaltest, dann erkennt das System das die Unternavigation fehlt und aktiviert bei der Hauptnavigation die Unterseiten in Form eines Aufklapp-Menüs. Wenn Du die Sidebar jetzt wieder anschaltest, dann hast Du dort weiterhin selbst angelegte Inhalte aber die Navigation wird nicht automatisch wieder aufgeteilt. Da es zwei Sidebars gibt und die Unterseiten auch noch an anderer Stelle platziert werden können, ist es nicht möglich, die Navigation wieder an die alte Stelle zu setzen. Das ist aber nicht schlimm. Mit einem Klick kannst Du das selbst erledigen. In dem Moment, wo Du das machst, wird die Hauptnavigation automatisch wieder umgeschaltet um dann nur noch die Seiten der ersten Ebene anzuzeigen und keine Unterseiten mehr.
Außerdem kannst Du in diesem Bereich die Webseite (2) spiegeln. Natürlich nicht die Schrift und die Inhalte, aber die Bereiche. Hast Du links in der Sidebar die Navigation und rechts Inhalte und Du klickst auf "Spiegeln" dann tauscht das System die Inhalte beider Sidebars aus bzw. wechselt die Positionen der beiden Sidebars. Hast Du nur eine Sidebar, geht das natürlich auch. Und Du kannst bestimmte Einstellungen (3) machen um verschiedene Elemente einen gewissen Abstand zueinander zu geben.

Hintergrund

Hintergrund: Hier kannst Du logischerweise den gesamten Hintergrund (Body) der Webseite gestalten. Also Hintergrundfarbe und Hintergrundbild. Sobald das Update komplett ist, werden wir diesen Bereich ausbauen, damit Du im Hintergrund Videos abspielen oder eine Slideshow laufen lassen kannst. Einige neue Funktionen möchten wir anhand des Hintergrundes kurz erklären. Diese Funktionen sind natürlich überall verfügbar, wo wir solche Bearbeitungselemente benutzen.
Transparenz: Ab sofort kannst Du an vielen Stelle eine Farbe transparent machen. Entweder indem Du in das Feld einen Wert schreibst oder in 10% Schritten mit den blauen Pfeilen den Wert veränderst. Damit kannst Du ganz moderne Effekte erzielen. Sobald Du eine neue Farbe wählst, wird der Wert wieder auf 100% gesetzt.
Verschiedene Möglichkeiten, Bilder einzubinden: Mit dem grünen Ordner wählst Du ein Bild aus deiner Bildverwaltung aus. Das dunkelblaue Datenbank-Symbol öffnet ein Fenster zu Bildern, die wir zur Verfügung stellen. Ein Teil der Bild kommt von uns, ein anderer Teil aus frei verfügbaren Bilddatenbanken die es erlauben, die Bilder frei zu privaten und kommerziellen Zwecken zu nutzen. Es gibt Bilder für den Hintergrund in einer Auflösung von 2560 x 1440 px (355),  für den Header in der Auflösung 1.400 x 500 px (409) und als Bilder für den Inhaltsbereich in drei Auflösungen, 533 x 300 px (564), 300 x 533 px (355) und 400 x 400 px (428). Außerdem transparente (39) und nicht transparente (208) Kacheln. Die Zahlen in () geben an, wie viele Bilder aktuell von jedem Format verfügbar sind. Viele Motive sind in allen Formaten verfügbar, damit Du immer die optimale Größe verwenden kannst. Du kannst jedes Bild für jeden Bereich verwenden. Das blaue Kreissymbol dient dazu, Bilder direkt von Deinem Rechner hochzuladen. Diese Möglichkeiten hast Du aktuell im Editor und zusätzlich beim Bild-Content. Für die Platzierung von Bildern haben wir neue Dialoge (3) entwickelt, die Dir die Wahl erleichtern.

Schriften für das Design

Schriften: Hier befinden sich jetzt die Einstellungen für die Schriften Deiner Webseite. Optisch hat sich nicht viel verändert. Allerdings siehst Du unten auf der Webseite sofort die Veränderungen.  Es gibt also ab jetzt eine Live-Vorschau. Wenn Du die Überschrift 1 zum Beispiel mit der Farbe rot versiehst, werden sofort alle vorhandenen Überschriften rot angezeigt, obwohl Du Dich im Bearbeitungsmodus befindest. Ganz links (1) wählst Du aus, welchen Schriftbereich du anpassen willst. Daneben (2) hast Du dann alle Optionen und rechts (3) siehst Du, wie Deine Einstellungen aussehen. Du kannst rechts auch einfach einen Schriftbereich anklicken und springst dann zu den entsprechenden Einstellungen. Sobald das Update durch ist, werden wir daran arbeiten, alle Schriften zu vereinheitlichen und zusätzlich für bestimmte Bereiche Google-Fonts einbinden. Man muss dann allerdings in Kauf nehmen, dass die Ladezeiten einer Webseite verlängert werden. Zur Auswahl der Schrift gibt es einen neuen Dialog, den du erreichst, wenn du auf das "A" neben der angezeigten Schrift klickst.

Die Einstellungen der Navigation

Navigation: Hier kannst Du die Navigation deiner Webseite anpassen. Ganz Links (1) kannst Du zwischen Haupt- und Unternavigation wählen. Daneben hast Du Optionen, um die Position (2) deiner Navigationen zu ändern, Navigationen zu entfernen (3) oder ein neues Template (4) zu wählen. Darunter siehst Du immer eine Vorschau (5) der aktuellen Einstellungen. Ganz rechts bestimmst du das Aussehen deiner Navigationen. Oben (6) wird angezeigt, welche Ebene gerade bearbeitet wird und welcher Zustand (Normal, Kette oder Aktiv) und darunter (7) siehst Du immer die Einstellungen dazu. Alles, was Du veränderst, wird live auf der Webseite angezeigt. Sobald das Update stabil läuft, wird es weitere Navigations-Templates geben und wir werden die Möglichkeit schaffen, die Schrift und Schriftgröße einer Navigation zu verändern. Die Technik dafür ist bereits hinterlegt.

Bevor wir zu der Bedienung kommen, müssen wir noch die Menüeinträge auf der rechten Seite erklären, die sehr interessant sind.

Zurücksetzen: Wenn Du auf diesen Eintrag klickst, dann werden alle Änderungen seit der letzten Speicherung verworfen. Dieser Schritt kann nicht rückgängig gemacht werden. Also vorsichtig damit umgehen.
Speichern: Wenn Du den Editor dass erste Mal öffnest, kannst Du alles Mögliche verändern. Du kannst ein neues Design auswählen (wenn das Update komplett ist), Farben, Bilder, Größen usw. ändern. Alles, was Du tust, bleibt für die Besucher Deiner Webseite unsichtbar, solange Du die Änderungen nicht speicherst. Sobald Du einmal auf Speichern klickst, wird der aktuelle Stand auf unserem Server gespeichert und dann werden diese Daten genutzt, um Deine Webseite im Netz anzuzeigen. Auf diesen gespeicherten Zustand wird das System zurückgesetzt, wenn Du den Eintrag "Zurücksetzen" anklickst. Hast Du noch nicht einmal gespeichert und drückst "Zurücksetzen" wird der ursprüngliche Zustand wieder hergestellt. 
Schließen: Wenn Du den Bearbeiten-Modus schließt, dann werden alle Änderungen, die nicht gespeichert sind, verworfen. Du kannst also alles Mögliche ausprobieren, solange Du nicht speicherst.

Das neue Konzept der Bedienung

Um zu verstehen, wie page4 arbeitet, möchte ich kurz das Konzept erklären. Dann wird man verstehen, wie genial und wie einfach page4 durch das neue Update wird und warum es so einmal ist. Und vor allem, warum man damit als User viel mehr Möglichkeiten hat als bei jedem anderen Baukastensystem.

Die Struktur einer jeden Webseite

Webseiten bestehen aus verschiedenen HTML-Elementen, sogenannten Containern, im Quellcode mit dem Kürzel "div" dargestellt. Diese "divs" verschachtelt man, um bestimmte Effekte zu erzielen und Strukturen aufzubauen. Der weisse Hintergrund in der obigen Darstellung stellt den Body, den Hintergrund einer jeden Webseite dar. Diesen Hintergrund kannst Du verändern, indem Du wie oben beschrieben, den Menüpunkt "Hintergrund" aufrufst. Alle anderen Bereiche erreichst Du, indem Du mit der Maus darauf klickst. Dabei ergibt sich das Problem, dass die Bereiche (divs) verschachtelt sind und quasi "übereinander" liegen. Die gelbe Fläche stellt den ganz unteren Bereich dar, in dem alle anderen Elemente eingebettet sind. Die roten Bereiche sind die Container, die die Hauptelemente darstellen. Also den Fussbereich (Footer), die Sidebar links und rechts, den Bereich der Navigation und den Kopfbereich, den Header. In oder auf diesen Bereichen werden Designelemente in eigene Container gebettet. Diese sind lila dargestellt. Das kann zum Beispiel die Navigation sein, die in dem Bild oben in der linken Sidebar und im Navigationsbereich einbettet ist. Das können auch Elemente im Kopfbereich (Header) sein, wie eine Slideshow, die hier den gesamten Bereich des Headers überdeckt, so dass man den roten Bereich gar nicht erkennen kann. Elemente im Header können wiederum beliebig übereinander liegen. Wenn ich auf der Slideshow einen Text oder ein Logo platzieren kann dieses Element darüber liegen, wie an der kleinen roten Fläche gezeigt
In der Mitte ist der Bereich, wo alle Inhalte einer Seite (Texte, Bilder, Formulare usw.) angelegt werden. Hier durch eine rosa Fläche dargestellt und die Inhalte durch graue Elemente.

Diese Struktur ist bei allen Webseiten zu finden, ob mit page4, mit Wordpress oder von Hand programmiert. Je nach Design bestehen natürlich Unterschiede in der Zusammenstellung der einzelnen Bereiche. Wenn Du dass grundsätzliche Prinzip verstanden hast, wirst Du auch unsere Bedienung sofort verstehen.

Es stellt sich nämlich die ganz einfache Frage, wie kann ich auf möglichst einfache Weise alle Bereiche einer Webseite bearbeiten und anpassen. In dem Bild sind die Bereiche klar getrennt und haben Abstand zueinander. In Wirklichkeit ist das natürlich nicht so und wenn der untere Bereich der Webseite keine Umrandung hat und auch keinen Innenabstand zu den anderen Elementen, dann siehst Du diesen Bereich überhaupt nicht. So wie Du oben den roten Kopfbereich nicht siehst, weil das Element darüber genauso groß ist.

Ein intelligentes System weiss immer, wo sich die Maus gerade befindet...

Wir haben page4 so programmiert, dass es "intelligent" ist und immer genau weiss, welche Elemente sich gerade an der Stelle befinden, wo Du mit der Maus drauf klickst und weil das System alle notwendigen Informationen hat, kann es Dir auch sofort einen Dialog anzeigen und alle möglichen Optionen vorschlagen.

Oben siehst Du so einen Dialog. In der Übersichtszeichnung ist ja sehr gut zu sehen, dass im Bereich, wo die Navigation eingebunden ist, mindestens drei "Container" übereinander liegen. Ganz unten ist der Bereich (gelb), welcher die gesamte Seite, das gesamte Layout enthält (2). Darüber liegt dann der Bereich (rot), wo die Navigation eingebettet ist (1) und auf diesem Bereich ist die Navigation als Element (lila) platziert, hier in diesem Dialog die Hauptnavigation (3).

Du kannst jetzt über diesen Dialog alle Elemente direkt bearbeiten, die sich an der Stelle befinden, worauf Du mit der Maus geklickt hast. Du kannst (1) den Bereich der Navigation bearbeiten und den Hintergrund, den Rahmen, die Höhe und Breite usw. bearbeiten. Oder Du klickst auf (2) und kannst dann den untersten Container, den Bereich vom Gesamtlayout bearbeiten und um die ganze Webseite einen gemeinsamen Rahmen legen, eine gemeinsame Hintergrundfarbe oder ein Hintergrundbild bestimmen und die Gesamtbreite des Layouts anpassen. Und zu guter Letzt kannst Du das Navigationselement bearbeiten, wobei Du hier mehrere Optionen (4) hast. Klickst Du auf Design bearbeiten, kommst Du zum Bereich, wo Du die gesamte Navigation anpassen kannst. Möchtest Du nur die Postion ändern, klickst Du auf "Navigation verschieben" und es wird Dir angezeigt, wohin Du dieses Element verschieben kannst. Möchtest Du das Element ausblenden, klickst Du auf "Navigation ausblenden" und wenn es möglich ist, wird die Navigation ausgeblendet und die verbliebene Navigation übernimmt die notwendigen Funktionen automatisch.

Je nachdem, auf welchen Bereich Du klickst, bekommst Du unterschiedliche Optionen. Klickst Du auf den Kopfbereich und ist da keine Navigation direkt eingebunden (hängt von der Vorlage ab und ist durchaus möglich) dann kannst Du neben den Bereichen noch die Elemente bearbeiten, die man auf den Bereich platzieren kann. Diese Funktion war vor dem Update direkt auf der Seite erreichbar, was immer wieder zu Irritationen geführt hat, weil man an der Stelle zwar die Elemente platzieren und bearbeiten konnte aber keine Möglichkeit hatte, dort direkt den Bereich zu bearbeiten. Das führte dann dazu, dass wir Anfragen hatten, warum man das vorhandene Headerbild nicht entfernen kann. Ab sofort ist alles an einer Stelle möglich und damit einfacher zu bedienen.

Damit Du das verstehst, nachfolgend noch kurz die Dialoge, zu denen Du kommst, wenn Du zum Beispiel auf den Header klickst.

Zuerst kommt der Dialog zum Auswahl der Bereiche. In diesem Fall haben wir untersten Bereich weggelassen, da diese Funktion aktuell noch nicht in meinem Testaccount ist und es außerdem etwas übersichtlicher macht.

Klickst Du auf den obersten Punkt (1), also "Layoutbereich - Kopf/Header 1" dann kommst Du direkt zum Bearbeitungsmodus für das Design dieses Bereiches:

Kurze Erklärung dazu. In der obersten Zeile (1) kannst du die Breiten und Abstände einstellen, die von dieser Stelle aus erreichbar sind. In der mittleren Zeile (2) wird der Hintergrund eingestellt und unten (3) kann man den Rahmen um den Bereich bestimmen.
Ganz unten am Bild siehst Du Deine Webseite und ein rotes Kreuz. Normalerweise kannst Du während der Bearbeitung einfach irgendwo anders hinklicken und neue Optionen auswählen. Alle Einstellungen werden zwischengespeichert. Du kannst aber die Bearbeitung auch beenden, indem Du das rote Kreuz rechts oben im jeweils ausgewählten Bereich anklickst.

Klickst Du auf den unteren Punkt (2), also "Inhaltselemente - Abschnitt 1" dann kommst Du direkt zum Bearbeitungsmodus, wo Du beliebige Inhalte auf den Header platzieren kannst. Das ist der Bereich, der vor dem Update "draussen" direkt erreichbar war:

Auch hier kurze Bemerkungen. Hier kann man je nach Version beliebige Elemente auf den Headerbereich platzieren. Links (1) sind alle vorhandenen Elemente angezeigt. Oben (3) sind allgemeine Informationen und Optionen verfügbar und unten (2) sind die Bearbeitungsoptionen des jeweiligen Elementes. Bei einem Text sieht das natürlich entsprechend anders aus.

Schlussbemerkungen

Die Dialoge haben sich von der Optik geändert. Die neuen Dialoge haben nun keine aufklappbaren Optionen mehr. Alles ist immer sichtbar, auch wenn dadurch der Dialog evtl. Scrollbalken bekommt. Die alten Dialoge, die nur noch vorhanden sind, weil es alte Layoutvorlagen gibt, haben einen neuen Farbanstrich bekommen. Wir haben eine Farbpalette festgelegt von Farben, die verwendet werden für die Optik und diese Farben werden nun fast überall verwendet, wodurch ein einheitliches Bild entsteht. Damit haben wir einen großen Teil der Anpassung fertig und page4 ist noch moderner und besser geworden. Es gibt viele Optionen auch im Bereich der Contents die wir jetzt nach dem Update bald aktivieren können.

Ich hoffe, der sehr lange Text erschreckt nicht. Unser Ansicht nach macht es Sinn, sich lieber mal ein paar Minuten alles durchzulesen und dann viel mehr Spaß beim Arbeiten mit page4 zu haben als bei jedem kleinen Missverständnis eine Supportanfrage zu stellen. Sehr wichtig wird sein, dass wir möglichst viele Rückmeldungen bekommen. Und es wäre sehr toll, wenn ihr begeistert seid, dies auch weiter zu sagen. Viele andere Webbaukästen haben nicht Erfolg, weil das System perfekt ist sondern weil die User das System bei Freunden und Bekannten bewerben. Davon haben alle was, je mehr User, umso leichter ist es, mehr Mitarbeiter einzustellen und noch schneller tolle Ideen umzusetzen.