|
Ein neuer Freitag, ein neues Update!
Da es diese Woche eine Pause gab bei meinem aktuellen Website-Projekt, hatte ich Zeit mich um eigene sowie ein anderes Kundenprojekt zu kümmern.
So hatte ich eine abwechslungsreiche Woche, in der ich ein Logo entwerfen, weitere Ansichten für Wellfunded designen und ein Plugin für das Grav CMS entwickeln konnte.
|
|
by Lella
Gabriella bietet Farb- und Stilberatungen. Personal Shopping und Garderobenplanung sowie Make Up an. Um in diesem Business weiter Fuss fassen zu können, möchte sie ein Logo sowie eine Webseite erstellen lassen. Über eine gemeinsame Kollegin hat sie meine Kontaktdaten erhalten und ich darf nun für sie dieses Projekt umsetzen.
Als Erstes kümmerte ich mich um ein geeignetes Logo. Die Vorgaben waren klar; es soll Männer und Frauen ansprechen, darf daher nicht zu feminin daherkommen, die Schrift soll ein wenig verschnörkelt sein, eine Form wie Diamant, Kreis, Quadrat oder Sechseck soll Bestandteil sein, die Farben Gold und evtl. Aquamarin/Türkis waren gewünscht.
Anfangs Woche konnte ich erste Vorschläge präsentieren.
Mit dem Feedback von Gabriella konnte ich die Auswahl einschränken und mich immer mehr ihrem Wunschlogo nähern.
Nach einer letzten Vorschlagsrunde gestern, haben wir das geeignete Logo gefunden:
Als Nächstes steht die Entwicklung der Webseite an, welche im Stil eines Mode-Magazins erscheinen soll. Ich bin sicher, dass wir auch hier zu einer überzeugenden Lösung finden werden.
|
|
Grav Plugin - Simple Responsive Tables
Um meinem Statement "Design & Development" gerecht zu werden, habe ich diese Woche auch einen ganzen Tag für die Entwicklung eines Grav-Plugins verwendet.
Beim letzte Woche vorgestellten Projekt bauhygiene.ch werden häufig Daten in grossen Tabellen dargestellt. Dies bietet schnell einen guten Überblick über komplexere Sachverhalte, allerdings war die Darstellung auf kleinen Bildschirmen schlecht. Je nach Gerät verhielt sich die Webseite anders, so dass im schlechtesten Fall das ganze Layout zu breit für den Bildschirm war.
Ich suchte nach einer Lösung, dass mein Kunde die Tabellen weiterhin wie gewohnt erfassen konnte, die Webseite immer korrekt darstellte und es zur selben Zeit für die Benutzer der Webseite möglich ist, alle Daten einzusehen.
Die einfachste Lösung, die Tabellen auf kleinen Bildschirmen in der Breite zu begrenzen und nach rechts scrollbar zu machen, schien zunächst gut zu funktionieren. Dafür waren auch nur CSS-Anpassungen notwendig. Allerdings gab es zwei Nachteile: Einerseits gab es keinen visuellen Hinweis, dass es rechts noch weitere Spalten gab und andererseits hatten die CSS-Änderungen bewirkt, dass kleine Tabellen auf grossen Bildschirmen nicht mehr wie gewünscht über die gesamte Breite des Inhalts angezeigt wurde.
Um den gewählten Ansatz in diesen zwei Punkten zu optimieren, waren nun doch grössere Eingriffe notwendig. Da es immer noch mein Ziel war, dass die nötige Arbeit nicht auf den Kunden zurückfällt, entschied ich mich ein Plugin für das Grav-CMS zu schreiben, welches die nötigen Änderungen vornimmt.
Das Plugin spürt im Inhalt einer Seite jede Tabelle auf und verschachtelt diese in zwei <div>-Elemente, wodurch ich auf CSS-Seite mehr Spielraum habe, die Darstellung zu beeinflussen.
Ausserdem bindet das Plugin auch gleich ein kleines JavaScript-Snippet ein, mit welchem gesteuert wird, auf welcher Seite der Tabelle ein visueller Hinweis erscheinen soll, dass man mit scrollen weitere Spalten erscheinen lassen kann.
Dies war jetzt alles ein wenig technisch, deshalb hier ein kleiner visueller Einblick, wie das ganze im Einsatz aussieht:
Diejenigen, welche die technische Umsetzung interessiert, können das Projekt auf Github ansehen: https://github.com/bgartenmann/grav-plugin-simple-responsive-tables
Ich habe mein Plugin für das offizielle Plugin-Verzeichnis von Grav eingereicht und hoffe, dass es demnächst freigegeben wird. Damit können alle, die Grav als CMS verwenden, ebenfalls davon profitieren.
|
|
Danke für's Lesen.
Und jetzt ab ins Wochenende!
Beni
|
|
|
|
|
