News

Neues Feature vorgestellt: Die neue personalisierbare Sidebar auf PSD-Tutorials.de

Neues Feature vorgestellt: Die neue personalisierbare Sidebar auf PSD-Tutorials.de

Mit der neuen Sidebar haben wir viele Veränderungen an der Oberfläche, aber auch unter der Haube vorgenommen.

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.
 

Was sagst du dazu?

Teile deine Meinung oder Erfahrung mit anderen Mitgliedern und sichere dir jeweils 5 Punkte!

Weiter zu den Kommentaren

Ähnliche Artikel

Kreative in der Krise – Deutscher Designtag legt Ergebnisse einer Umfrage vor

Kreative in der Krise – Deutscher Designtag legt Ergebnisse einer Umfrage vor

Der Deutsche Designtag hat die Ergebnisse einer Umfrage zur Lage von Agenturen in der Corona-Krise vorgelegt. Ob beruflich oder privat...

Weiterlesen

Hier wohnt die Kreativität: Jetzt 40 % Rabatt auf Creative Cloud

Hier wohnt die Kreativität: Jetzt 40 % Rabatt auf Creative Cloud

Mit Inspiration könnt ihr Großes erschaffen. Zeigt eure Kreativität in allen Formen und Farben und sichert euch die Apps und Tools von...

Weiterlesen

5 Beispiele, warum künstliche Intelligenz mir Angst macht (aber ich mich trotzdem auch drauf freue)

5 Beispiele, warum künstliche Intelligenz mir Angst macht (aber ich mich trotzdem auch drauf freue)

Seit ich 9 Jahre bin, interessiere ich mich für Computer. Der erste Rechner war ein Amiga 500. Ich war begeistert, als ich Wörter...

Weiterlesen

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Jenny_Franken
  • 08.09.2017 - 12:01

Ich kann mich nur den anderen anschließen, mit den Kompliment an die neue SideBar.

Aus gesundheitlichen Gründen war ich eine Weile nicht am Rechner, geschweige dann bei PSD Tutorial und als ich wieder online kam ist mir das sehr positiv entgegen gekommen mit der klaren Struktur.

Alle Daumen hoch :)

Portrait von Lucida
  • 12.06.2017 - 21:44

Sieht klasse aus und war im Video sehr gut erklärt. Ich mag die Tab-Ansicht und weißen Hintergrund :-)

Portrait von sven67
  • 06.06.2017 - 07:29

Die Sidebar und der schlanke Aufbau gefällt mir sehr gut. Ein Dauen hoch für den Programmierer.

Portrait von AnneRick
  • 04.06.2017 - 08:26

Mir gefällt die neue Sidebar sehr gut.

Anne

Portrait von Norbert Schumann
  • 02.06.2017 - 17:31

Großes Kompliment an die Entwickler. Tolle Neuerung und natürlich auch sinnvoll, was die vielen Verbesserungen unter der Haube anbelangen. Mir gefällt sie sehr gut. Ein Tab "Meine Trainings" für Autoren wäre noch toll.

Portrait von lionheike
  • 02.06.2017 - 08:37

An sich top, aber wo finde ich das Tutorial das man sich kostenlos anschauen kann? In der Sidebar jedenfalls ist keine Vorschau o.ä. zu sehen?

Portrait von dkarvounaris
  • 02.06.2017 - 10:06

Du findest es unter "Neueste Inhalte", zuvor hieß es ähnlich "Neue Inhalte".

Portrait von shivaZ
  • 02.06.2017 - 08:16

Nach kurzer Verwirrung habe ich gecheckt, daß Ihr eine Anpassung vorgenommen habt und muß sagen, es gefällt mir sehr gut .. schöne Umsetzung, mein Kompliment!

Portrait von fe_web
  • 02.06.2017 - 07:44

Die neue Sidebar ist sehr interessant gestaltet. Aber wo ist eigentlich die Anzeige geblieben des Tutorials welches man sich kostenlos anschauen konnte während einer gewissen Zeit. Das aktuelle Tutorial finde ich schon, aber wo ist die Zeitangabe wo es kostenlos anschaubar ist? Danke für eine Antwort.

Portrait von dkarvounaris
  • 02.06.2017 - 10:06

Du findest es unter "Neueste Inhalte", hieß zuvor ähnlich "Neue Inhalte".
Wenn der Countdown nicht angezeigt wird bei dir, poste bitte dein System und Browser, damit wir dem nachgehen können.

Portrait von Hannu
  • 02.06.2017 - 07:00

Mir gefällt die neue Sidebar ebenfalls sehr gut, insbesondere auf mobilen Geräten und die Ansicht mit den Tabs. Das Video war tatsächlich sehr hilfreich, hätte ich ja gar nicht alles lesen müssen.

Portrait von gresti
  • 02.06.2017 - 00:42

Tusch -Tatataaaa
ihr lieben Helfer - Programmierer - Layout Spezialisten - (schreibmalebeneineÜbersicht(dazunochein Video)) boahh
Klasse - nee liebevoll gemacht.
einfach gesagt: Dankeschön

Portrait von Divina
  • 01.06.2017 - 23:02

Ich finde die neue Sidebar auch klasse. Besonders die Möglichkeit, horizontale Reiter zu nutzen gefällt mir gut. Und die Profilbelange oben rechts sind sehr übersichtlich. Einen neuen Stil bräuchte ich nicht, da der ursprüngliche sehr augenschonend ist. Aber für verspielte Seelen sind mehr Möglichkeiten natürlich auch nicht zu verachten :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.06.2017 - 20:39

Kommt mir absolut gelungen vor - Kompliment!

Portrait von LikeLowLight
  • 01.06.2017 - 19:59

Jetzt, nach ein paar Stunden, finde ich sie, vor allem gegenüber der früheren Verwendung der Sidebar, wirklich gelungen. Wenn dieser Aktualisierungsbutton auch wirklich das tut, was sein Name verspricht :), dann ist sie wirklich nützlich. Die Personalisierung von Anzeige und Inhalten ist vielversprechend, den tatsächlichen Nutzen wird man erst nach einiger Zeit ausreichend schätzen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.06.2017 - 18:48

ich hab mich eben echt erschrocken, als ich psd-tutorials aufgeamacht habe und dann klatschte mir ein schwarzes etwas ins gesicht.
ok
finde gut, das ich jetzt die dinge rauschschmeißen kann, die ich nicht brauche! super
auch die reiterfunktion – daumen hoch

malus: mein schönes orange ist weg! :(

vielleicht gibt es ja, wenn ihr noch mehr stile bastelt, auch die möglichkeit was nicht männlich herbes (und nicht grell weißes) zu haben … das wäre so geil
freundliches orange, zartes vanille gelb, oder mai grün :D
fröhliche farben lassen das herz aufleuchten (geben energie!)
love helene

Portrait von dkarvounaris
  • 01.06.2017 - 19:12

Hab die Augen offen... wir werden schon sehr bald euch die Chance geben, die weiteren Stile zu bestimmen ;)

Portrait von geraldw
  • 01.06.2017 - 17:01

Hallo bei PSD,
auch mir gefällt eure neue Sidbar sehr gut, - und super gemacht mit dem Video zur Erklärung, das erspart unnötiges rumgefummel bis man endlich alles verstanden hat. - Danke.

Folgendes gefällt mir allerdings überhaupt nicht, bei der Darstellung, wieviel Zeit noch vergeht bis zum nächsten neuen Inhalt. Hier springt die Darstellung immer wieder um, je nachdem ob sie in eine oder nur in zwei Zeilen passt. Dadurch wird die Sidebar sehr unruhig, man hat im Augenwinkel immer diese Bewegung des Zeilenumbruchs, wodurch sich natürlich der gesamte Rest darunter ebenfalls sprunghaft verschiebt. Würde man Stunden, Minuten und Sekunden mit Std., Min. und Sek. abkürzen, würde die Anzeige immer in nur eine Zeile passen. Da ihr ja gerade an den 720 Stunden arbeitet, könnte man diese Art der Darstellung vielleicht sofort mit beheben.

Beste Grüße Gerd

Portrait von jawol
  • 01.06.2017 - 16:37

Die neue Sidebar gefällt mir außerordentlich gut, weil sie übersichtlich und wirklich für jeden Geschmack adaptierbar ist. Außerdem möchte ich mich für das Eiführungsvideo bedanken, das mir den Umgang mit der neuen Sidebar von vornherein erleichtert. Danke!

Portrait von Stefan Riedl
  • 01.06.2017 - 16:14

Tolles Video zur Erklärung aller Einzelheiten! Find ich super. Und natürlich die Bar selbst, an der man nun gerne länger verweilt ;-)

Portrait von grooby
  • 01.06.2017 - 15:39

Kleine Panne in der neuen Sidebar:
"der nächste Inhalt kommt in 721 Stunden, 33 Minuten und 58 Sekunden"... macht ihr Urlaub? :)

Ansonsten ist sie gut aufgeräumt und übersichtlich.

Portrait von dkarvounaris
  • 01.06.2017 - 15:42

Haha Urlaub wäre schön ... aber nein, es gibt 2-3 Fehler die nur in der Live Release aufgetaucht sind. Wir sind dran :)

Portrait von gresti
  • 01.06.2017 - 15:37

Ich finde die neuen Änderungen sehr gelungen. Besonders die Personalisierung gefällt mir. So schaffe ich mir doch "mein" PSD" wie ich es brauche. Klasse Arbeit! Danke dafür.
Auch das Video und die tolle Beschreibung ist sehr gelungen und hilfreich. Spitze!

Portrait von PBeer
  • 01.06.2017 - 15:29

Mir gefallen die Veränderungen. Natürlich war ich Anfangs etwas verwirrt bzw. überrascht. Zum Glück seid ihr nicht dem allgemeinen Trend der dünnen rechten Scrollleiste gefolgt - im Gegenteil.

Portrait von Annageddon
  • 01.06.2017 - 14:54

Ich war kurz irritiert, weil mein Button weg ist ( bzw. An einer neuen Stelle ) aber mit der sidebar werd ich mit etwas Übung zurecht kommen.
Das Video fand ich hilfreich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.06.2017 - 21:41

Mir gefällt die neue sidebar auch sehr gut!

Kleiner Hinweis/Wunsch: wenn sie ausgeblendet ist, würde ich gerne sehen ob ich
eingeloggt bin oder nicht... ohne klicken zu müssen (das was der orange tab vorher machte).

Einfacher Lösungsvorschlag: der Umschaltpfeil könnte eingeloggt wie bisher der orange tab) farbig sein :-)

Daumen hoch!!!

x
×
×