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