Die wichtigsten Verbesserungen im visuellen Bereich im Überblick:
- Desktop- und Mobil-Ansichten wurden vereinheitlicht
- Die Sidebar wurde auch für Tablets und Smartphones realisiert
- Möglichkeit zur vollständigen Personalisierung der Sidebar
- Layouts zur farblichen Anpassung stehen zur Auswahl (weitere folgen)
- Neue Inhalte wurden der Sidebar hinzugefügt
- Inhalte können permanent ein- und ausgeblendet werden
- Inhalte können als horizontale Reiter oder Tabs dargestellt werden
- Die wichtigsten Infos des früheren „Mein PSD“-Menüs sind immer sichtbar
- Die Sidebar kann angepinnt werden, damit sie immer sichtbar ist
- Die Erinnerungsfunktion ermöglicht eine Personalisierung und zeigt eingeschränkte Infos für Punkte und Benachrichtigungen auch im ausgeloggten Zustand
Im technischen Bereich wurde vieles verschlankt, optimiert oder gänzlich entfernt. Ressourcen, die geladen werden, wurden reduziert, wodurch sich die Ladegeschwindigkeit besonders bei langsamen und mobilen Verbindungen verbessert. Was benötigt wird, wird nur bei Bedarf geladen. Die Performance auf günstigen sowie älteren Geräte wurde durch die geringere Ressourcen-Beanspruchung verbessert.
Eine detailliertere Beschreibung aller Änderungen und Verbesserungen findet ihr im unteren Bereich dieser News.
Im folgenden Video führe ich euch schnell in die neuen Features und in die neue Sidebar ein:
Ich wünsche euch viel Spaß mit der neuen PSD-Tutorials.de-Sidebar!
Das ganze PSD-Team freut sich auf euer Feedback!
Habt ihr Fragen zur neuen Sidebar, freuen wir uns, diese in unserem Feedback-Thread zu beantworten!
Was verbessert sich für den Nutzer bzw. wurde im Detail verändert?
Für den Nutzer gibt es nur noch eine einheitliche Version für einiges, was auf verschiedenen Geräten uneinheitlich zu bedienen war. Konkret:
- Mobiles Login-/Registrieren-Menü, welches zuvor auf die Forum-Login-Seiten und Registrieren-Seiten umleitete, gibt es nicht mehr.
- Wie von der Desktop-Version gewohnt, öffnet sich nun oben der Bereich für den Login auf allen Geräten.
- Der mobile Nutzer muss nicht mehr viele Daten auf der Forum-Registrieren-Seite eingeben. Er kann – genauso einfach wie auf dem Desktop – beim Login-Bereich oben mit der Eingabe seiner E-Mail und eines Passworts sofort einen Account einrichten.
- Das separate „Mein PSD“ in der mobilen Version wurde abgeschafft und mit dem neuen in der Sidebar vereinheitlicht.
- Die Sidebar war zuvor nur für große Desktops verfügbar. Diese kann nun auf allen Geräten, nicht-mobil und mobil benutzt werden.
- Zuvor wurde die Sidebar geladen, egal ob verfügbar oder nicht. Diese wird jetzt nur so weit wie benötigt geladen. Teile davon werden bei Bedarf nachgeladen.
- Die Sidebar unterscheidet nun zwischen Gästen, eingeloggten und erinnerten (sprich: registrierten, aber nicht eingeloggten) Nutzern.
- Gäste erhalten eine vereinfachte, schlanke Sidebar. So kann man als Gast schneller surfen.
- Wenn man die Erinnerungsfunktion nutzt, ist die personalisierte Sidebar auch bei nicht-eingeloggtem Zustand verfügbar. Dies ist abschaltbar, sodass bei einem Logout die Sidebar für Gäste wieder erscheint.
- Somit kann man auch ohne Login sehen, ob man aktuell neue Nachrichten oder Hinweise hat. Dies ist sicher, da ein Zugriff auf diese nur mit Login möglich ist.
- Die Sidebar kann nun Einstellungen für mehrere Nutzer auf dem gleichen Gerät separat verwalten. Dies war zuvor nicht möglich (z. B. haben sich Farbeinstellungen mehrerer Nutzer überschrieben).
- Die Sidebar kann angepinnt werden. Im nicht-angepinnten Zustand merkt sich die Sidebar, ob sie zuletzt geöffnet oder geschlossen wurde, und wird so beim nächstem Seitenaufruf erneut geladen. Im angepinnten Zustand bleibt die Sidebar immer offen.
- Die Status-Einstellungen der Sidebar (Pinning, offene Tabs, Farben etc.) gehen beim Löschen der Cookies nicht mehr verloren wie bei der alten Sidebar. Wir haben auf den App-Speicher der Browser umgestellt oder speichern die wichtigen Einstellungen direkt in der Datenbank. Nur wenn dieser App-Speicher auch gelöscht wird, gehen ein paar unwichtige Einstellungen verloren. Cookies können nun jederzeit unproblematisch gelöscht werden.
- Anders als zuvor können die Farben der Sidebar jederzeit zurückgesetzt werden, indem man den Standard-Stil auswählt.
- Die Auswahl eines neuen Stils funktioniert nun in jedem Browser. Zuvor war die Farb-Funktion auf verschiedenen Systemen nicht nutzbar.
Weitere grundlegende Änderungen, die auch die Navigation betreffen:
- „Mein PSD“ gibt es so nicht mehr – der Bereich wurde Bestandteil der neuen Sidebar und somit des neuen „persönlichen Bereichs“ auf PSD-Tutorials.de.
- Das mobile „Mein PSD“, das völlig anders war, wurde auch durch die Sidebar ersetzt.
- Ebenso gibt es die Ausloggen-Funktionalität nicht mehr in der Navigation. Sie kann in der Sidebar gefunden werden, wenn man auf sein Profilbild klickt.
- Die Navigation ist nun ohne Umbruch auch bei etwas kleineren Displays/Auflösungen nutzbar. Dies wird noch einmal verbessert bei unserem nächsten Release der Navigationsüberarbeitung.
- Man beachte, dass man die Sidebar nun auch auf jedem mobilen Gerät nutzen kann.
- Die Login-Links sind alle Teil der neuen Sidebar bzw. in der mobilen Ansicht öffnet das Login-Symbol (welches nun auch Text auf vielen Geräten anzeigt) direkt den Login-Bereich oben.
- Anders als zuvor sind nun auch all diese Bereiche in den mobilen und nicht-mobilen Ansichten im gleichen Look-&-Feel dargestellt. Einzige Ausnahme ist die mobile Navigation, die noch ganz anders funktioniert und aussieht – das steht demnächst mit der Navigationsüberarbeitung an.
- Viele Menüpunkte von „Mein PSD“ wurden vereinfacht, z. B. gibt es für Punkte aktualisieren, anzeigen usw. nicht mehr zig Links, sondern nur noch einen. Man klickt einfach auf seine Punktezahl für mehr.
- Das mobile Menü wird nur noch für mobile Geräte geladen.
- Für mobile Geräte wird die große Hauptnavigation (aktuell extrem viel HTML) nicht mehr geladen, wenn die mobile genutzt werden kann.
- Die Sidebar kann auf mobilen Geräte nicht angepinnt werden, weil das wegen des Screenspace nicht sinnvoll ist.
- Die Sidebar lädt auf mobilen Geräten immer im geschlossenen Zustand.
- Die „Mein PSD“-Links erreicht man nun durch einen Klick auf sein Profilbild.
- Unterhaltungen, Hinweise und Punkte-Historie kann man nun direkt mit nur einem Klick auf die entsprechende Anzeige aufrufen.
Neue/verbesserte Features der Sidebar:
- Ein Icon für Einstellungen ermöglicht die Personalisierung der eigenen Sidebar (diese werden weiter unten erläutert).
- Die Inhalte können auf zwei verschiedene Arten angezeigt werden:
- Tabs: Mit den Tabs wird immer nur ein Content angezeigt. Dies ermöglicht es, ohne lästiges Scrollen auf die Inhalte zuzugreifen – wie von vielen gewünscht.
- Horizontale Reiter: Für alle, die die alte Darstellung weiterhin bevorzugen und scrollen möchten, stehen die Inhalte als horizontale Reiter zur Verfügung. Außerdem können mehrere Inhalte angezeigt werden.
- Die Sidebar merkt sich den letzten Tab bzw. die geöffneten Reiter. Diese Einstellung geht nicht mehr durch das Löschen von Cookies verloren.
- Einzelne Tabs oder Reiter können in den Einstellungen nach Belieben ein-/ausgeblendet werden.
- Einzelne Inhalte können aktualisiert werden, ohne die ganze Seite neu zu laden – besonders hilfreich und benutzerfreundlich, wenn z. B. ein Artikel geschrieben wird.
- Alle Texte werden ungekürzt angezeigt.
- News werden zeitlich unterteilt angezeigt.
- Forenbeiträge und -themen zeigen beim Überfahren des Textes die Forum-Kategorie sowie die Anzahl an Antworten an.
- Es kann nun sofort gesehen werden, ob eine neue Unterhaltung oder eine neue Benachrichtigung eingetroffen ist. Vorher waren mehrere Klicks notwendig, um zu sehen, worum es sich handelt, und um aufzurufen.
- Die eigenen Punkte hat man nun immer im Blick.
- „Neue Unterhaltung“ ist direkt vom Profilmenü erreichbar.
- „Neuen Content veröffentlichen“ ist direkt im Profilmenü immer erreichbar.
- „Aktuelle Contests“ ist nun ganz neu Bestandteil der Sidebar.
- „Neue Tutorials“ ist nun ganz neu Bestandteil der Sidebar.
- „Neue Downloads“ ist nun ganz neu Bestandteil der Sidebar.
- „Aktuelle Produkte“ und „Nächster Inhalt“ sind nun ein Tab.
- Layouts/Stile ermöglichen das Stylen der Sidebar mit verschiedenen vorgefertigten und gut aussehenden Stilen – die Farbauswahl ist umfangreicher als zuvor und kommt ohne die technischen Darstellungsprobleme der früheren Lösung daher.
Was verbessert die neue Sidebar im Allgemeinen aus technischer Sicht?
Die Sidebar benötigt deutlich weniger Ressourcen im Browser. Sie ist in gewisser Weise von der Seite abgekoppelt und wird dementsprechend auch nicht mehr während eines Seitenaufrufs generiert und geladen, sondern nachträglich als eigenständige AJAX-Komponente. Zusätzlich kann somit jeder Seitenaufruf des ganzen Projekts schneller zum Browser gesendet werden.
Wir haben mit der alten Sidebar auch etliche Komponenten direkt entfernt, die zu viele Ressourcen laden und benötigen, und haben einfachere Lösungen genommen.
Für anderes haben wir auf simplere und native Technologien (z. B. natives JavaScript vs jQuery) gesetzt, die nicht nur (je nachdem) um den Faktor 100 bis 10.000 schneller sind, sondern auch kompakter.
Neuer Code ermöglicht uns die Personalisierung der Sidebar für jeden Nutzer, ohne Nachteile z. B. in der Geschwindigkeit. Noch hat diese wenig Optionen, doch es ist geplant, diese bei Bedarf systematisch auszubauen.
Ebenso kann Content nun live und individuell dynamisch (per AJAX) geladen werden. Dies wird möglich durch die Aktualisierungsfunktion der Sidebar und das anfängliche Laden von anzuzeigenden Tabs (zuvor wurde immer alles geladen), was wiederum Processing- und Ladezeit verkürzt und Ressourcen reduziert.
Weiterhin haben wir viele Sachen, die für Gäste unnötig geladen wurden, dadurch entfernen können. Wir haben Bereiche der Navigation wie „Mein PSD“ in die Sidebar integriert – Bereiche, welche auch nachträglich geladen werden und nicht direkt beim Seitenaufruf.
Mobile und nicht-mobile Ansichten wurden vereinheitlicht. Dies vereinfacht wiederum die Wartung, da nur noch ein Code für beides gepflegt werden muss, was auch die Anzahl möglicher Bugs reduziert. Gleichfalls bedeutet das für den Nutzer: Es wird nur noch ein Code geladen anstatt wie zuvor Code für mehrere Endgeräte – eine erhebliche Einsparung an Datenvolumen und Ladezeit.
Wir haben dann an Ressourcen auch gleich noch einiges anderes optimiert. Letztendlich werden nun mit allen Änderungen auf der Desktop-Version mind. 150 KB weniger an Daten geladen, die mobilen Versionen für nicht eingeloggte Nutzer laden sogar mind. 350 KB weniger an Daten. Das ist eine massive Verbesserung, die wir künftig auch in anderen Bereichen weiterführen werden.
Ansonsten ist sie gut aufgeräumt und übersichtlich.
