Redesign! Wie ein responsives Layout mit Sass entsteht

Hast du es gehört? Das Hämmern und Bohren hier auf neontrauma.de? Während es im Blog eigentlich etwas stiller zuging, drang doch der gedämpfte Klang von Sägen und Klopfen nach außen, wurden schwere Dinge mit einem dumpfen Schleifen durch die Gegend geschoben, ab und an klirrte eine heruntergefallene Schraube: hinter den Kulissen habe ich an einem neuen Layout gearbeitet!

Ich bin wahnsinnig froh, es jetzt endlich soweit fertig gestellt* zu haben und hoffe, dass es dir genau so gut gefällt wie mir. 🙂

* Eigentlich wollte ich das Layout schon nach dem langen Osterwochenende umstellen. Aber wie das halt so ist, habe ich dann natürlich immer noch irgendwo etwas gefunden, mit dem ich noch nicht so 100%ig zufrieden bin. Naja – bekanntlich ist „perfekt“ zwar gut, „fertig“ jedoch um Längen besser. 😉
Daher nehme ich das Layout dann jetzt doch mal online, auch wenn ich hier und da bei Zeiten noch etwas nacharbeiten werde, etwa bei der responsiven Darstellung der Fotogalerien. Den „Auch spannend…“-Slider am unteren Bildschirmrand hatte ich ja schon im letzten Layout verbaut, wollte ihn aber etwas umschreiben… der kommt also auch irgendwann wieder. 😉

Screenshot: Layout von neontrauma.de ab April 2015

 

Mobile Ansicht

Mobile Ansicht

Kurz zur Erinnerung – so sah es vorher aus:

Screenshot: Layout von neontrauma.de bis April 2015

Viele Elemente habe ich beibehalten bzw. weiterentwickelt, wenn sie sich in den letzten Monaten bewährt hatten. Die Menüleiste ganz oben hat zum Beispiel nur eine andere Hintergrundfarbe bekommen.

Einiges hat sich aber auch verändert:

  • Statt einer verwende ich jetzt doch wieder zwei Sidebars, um den Platz auf großen Monitoren besser zu nutzen. Da das Layout responsiv ist, wandern die Sidebars entweder beide in den Fußbereich der Seite oder es wird nur eine Sidebar angezeigt.
  • Anstelle der kleinen Vorschau-Boxen auf der Startseite zeige ich die letzten Artikel doch wieder in voller Breite an.
  • Das Türkis ist ein wenig heller geworden, da er mir als vollflächig verwendeter Farbton etwas zu dunkel war.

Am allermeisten hat sich tatsächlich unter der Haube getan: statt mit normalem CSS habe ich das Styling in Sass mit Bourbon, Neat und Refills entwickelt. Was das alles ist, zeige ich weiter unten. 🙂

100% Handarbeit – warum das Redesign?

Das vorherige Layout von neontrauma.de basierte auf einem fertigen Theme, das ich nur mehr oder weniger stark angepasst hatte (SimpleMag). Ironischerweise bin ich ja selber Webdesignerin, hatte aber nie genug (Frei-)Zeit, neben dem inhaltlichen Befüllen des Blogs auch ein Layout zu schreiben, was meine Ansprüche erfüllte.

Ziemlich bald schon war ich allerdings unzufrieden… gerade was die responsive Darstellung angeht bzw. die Art und Weise, wie das Layout gecodet war. Dort etwas zu ändern, war extrem umständlich. Ich wollte mir meinen Code doch lieber wieder komplett selber schreiben!

Dass ich jetzt über Ostern vier Tage frei hatte, kam mir da sehr gelegen. 🙂

Wie genau ist das Layout entstanden?

Beim Schreiben dieses Artikels habe ich schnell gemerkt, dass ich der Vollständigkeit halber ein bisschen weiter ausholen muss und das ziemlich ausführlich wird. Deswegen habe ich den Beitrag in drei Teile gesplittet:

  1. Was sich vom Aussehen her verändert hat, hast du gerade schon erfahren.
  2. Im nun folgenden zweiten Teil In der Code-Küche gehe ich mit Sass, Bourbon, Neat und Refills auf die Code-Technologien ein, mit denen ich über HTML & CSS hinaus entwickle.
    Daher ist dieser Abschnitt eher technisch und ist vor allem dann für dich interessant, wenn du dich zumindest grundlegend mit CSS auskennst.
    Ich habe mir aber Mühe gegeben, alles so zu erläutern, dass es auch mit wenig Code-Kenntnissen nachvollziehbar und anschaulich ist.
  3. Im letzten Teil Man nehme… wir backen uns ein WordPress-Layout verrate ich, wie ich an so ein Redesign-Projekt herangehe: wie ich das WordPress-Layout von der ersten Zeile an nach und nach erweitert habe, wie ich die responsive Darstellung entwickle und teste, welche Tools ich dabei verwende.

Also los! Keine Angst vor Quellcode! 🙂

In der Code-Küche

In der Firma arbeite ich bereits seit einiger Zeit mit Sass und bin davon so begeistert, dass ich auch das Layout für mein Blog nicht mehr mit piefigem Normalo-CSS schreiben wollte. 😀

Sass – Viagra für dein CSS 😉

Sass? Was ist das? – Eine Erweiterung für CSS. Genauer gesagt, ein Präprozessor – das heißt, du schreibst coolen Sass-Code und dieser wird danach in eine CSS-Datei umgewandelt, die du ganz normal in deinem Layout einbindest.

Sass vereinfacht das Schreiben von CSS enorm:

Variablen

In Sass kannst du Variablen definieren und so zum Beispiel an einer einzigen, zentralen Stelle definieren, dass die $linkfarbe immer genau den wunderbar grünen Farbwert #5ba850 hat. An allen Stellen, wo etwas grün werden soll, schreibst du dann nicht mehr den Hexcode, sondern nur noch die Variable $gruen – und wenn sich der Farbton ändert, musst du den Code nur an einer Stelle ändern.

Dabei kannst du nicht nur einzelne Angaben wie einen Farbwert oder eine Schriftart als Variable setzen, sondern du kannst sogar ganze Code-Blöcke einmal definieren und dann einfach nur referenzieren. Sogenannte Mixins und Extends machen’s möglich!

Hier habe ich zum Beispiel einmal festgelegt, wie die Icons aussehen sollen, die ich über die Iconfont Genericons einbinde:

%icon {
   -webkit-font-smoothing: antialiased;
   font: normal 24px/1 'Genericons';
   vertical-align: middle;
   padding-right: .5em;
}

Dort, wo die einzelnen Icons später verwendet werden, muss ich dann nur noch sagen, welches Icon genommen werden soll:

.tags:before {
   @extend %icon;
   content: '\f302';
}

Verschachtelungen

Hast du dich auch x-mal geärgert, dass du in CSS so viel wiederholen musst?

#header .suche { border: 1px solid #ccc; }
#header .suche input { font-size: 14px; }
#header .suche button { background: #5ba850; }

In Sass kannst du deine Anweisungen einfach verschachteln! 🙂

#header .suche {
   border: 1px solid #ccc;

   input {font-size: 14px; } 

   button { background: #5ba850; } 
}

Im CSS sieht das nachher genauso aus, aber du sparst dir beim Entwicklen unheimlich viel stupide Tipparbeit und übersichtlicher wird der Code auch.

Partials

Zur Übersichtlichkeit trägt auch die Tatsache bei, dass du nicht eine riesenlange Datei hast, sondern deinen Code auf mehrere Dateien aufteilst (sogenannte Partials). Du hast also beispielsweise eine Datei für den Header, eine für die Kommentargestaltung und so weiter… und eine, wo du all deine Variablen definierst.

Die Sass-Partials meines Layouts

Die Sass-Partials meines Layouts

… und dazu ein Schuss Bourbon!

Nein, ich hab mir mein Layout nicht schöngesoffen. *g*

Bourbon

Bourbon ist eine Erweiterung für Sass, d.h. es bringt eine ganze Reihe vordefinierter nützlicher Funktionen in Form von Mixins mit.
So ist zum Beispiel nur noch eine Zeile Code im Sass erforderlich, um einen CSS3-Verlauf zu definieren… eigentlich brauchst du für die verschiedenen Browser ja immer jede Menge Angaben.

In Sass schreibst du also:

@include linear-gradient(to top, #8fdce5, #3dc3d1);

… und daraus wird beim Kompilieren:

  background-color: #8fdce5;
  background-image: -webkit-linear-gradient(#8fdce5, #3dc3d1);
  background-image: linear-gradient(#8fdce5, #3dc3d1);

Obendrauf Neat & Refills

Für Bourbon gibt es eine Reihe unglaublich praktischer Erweiterungen!

Grundsätzlich kann man alle diese Dinge auch komplett selber schreiben, zum Beispiel den Code für eine Tab-Navigation. Aber manchmal muss man das Rad einfach nicht zum 593042. Mal neu erfinden und investiert seine Zeit & Energie lieber auf die wirklich kreativen Aspekte beim Layouten.

  • Das Framework Neat setzt auf Bourbon auf und bereichert es um ein Grid-System.Bourbon Neat
    Das heißt: gedanklich unterteilst du dein Layout in zwölf Spalten, und schon wird es sehr easy, verschiedenen Bereichen verschiedene Breiten zu geben. So soll die Sidebar zum Beispiel immer 4 von 12 Spalten breit sein und der Inhaltsbereich demzufolge 8. In Neat gibst du dann lediglich diese Spaltenzahl an und musst nicht mühselig mit Prozenten oder gar Pixelwerten herumrechnen. Dabei ist Neat responsiv ausgelegt, also auch für die Darstellung auf Smartphones & Tablets bereit.
  •  Refills ist eine Bibliothek aus lauter Code-Schnipseln:
    Refills
    Enthalten sind alle möglichen Elemente, die auf so einer Webseite halt auftauchen können: Navigationsleisten, Suchformulare, aufklappbare Akkordeon-Texte, … für jedes Element werden der HTML-Code, das Sass-Code sowie ggf. auch das nötige jQuery angegeben. Dadurch kannst du sehr effizient eine Basis aus standardisierten Elementen schaffen und dann auf ihr aufbauen.

Meine Entwicklungsumgebung

Wie gesagt, die Sass-Dateien enthalten kein herkömmliches CSS.
Damit aus den einzelnen Partials am Ende eine normale CSS-Datei wird, die du in deinem Layout einbinden kannst und die der Browser versteht, muss der Sass-Code kompiliert werden. Um den Rahmen dieses Beitrags nicht zu sprengen, gehe ich hier nur mal ganz grob darauf ein, wie so eine Entwicklungsumgebung aussehen kann:

Deine Partials hast du in einem Texteditor wie etwa Sublime Text geöffnet. Jedesmal, wenn du speicherst, werden sie automatisch kompiliert und die CSS-Datei aktualisiert.
Damit das funktioniert, ist ein bisschen Kommandozeilen-Akrobatik nötig: Getting started with Sass and Bourbon

Eine ziemlich gute Anleitung für das Entwicklen eines WordPress-Themes mit Sass unter Mac habe ich hier gefunden: How to use Sass with WordPress (wobei ich auf Compass verzichte)

Genau wie dort beschrieben, habe ich mir mit MAMP eine lokale Datenbank aufgesetzt und WordPress lokal auf meinem Rechner installiert. Der Vorteil einer lokalen Installation ist, dass nicht jedesmal beim Ändern einer Datei eine Verbindung zum Webserver aufgebaut werden muss, was das Speichern und Neuladen natürlich beschleunigt.

Um dein Blog möglichst „lebensnah“ zu testen, solltest du dir über die WordPress-Option Werkzeuge » Daten exportieren deine Artikel, Kategorien und so weiter exportieren und im Testsystem anschließend über Werkzeuge » Daten importieren wieder einspielen. Auch Plugins wollen in der Testumgebung installiert werden.

„Man nehme…“ – wir backen uns ein WordPress-Layout

Wo fängt man denn an, wenn man ein ganzes WordPress-Theme selber schreibt? Und das Ganze auch noch responsiv werden soll?

Tatsächlich habe ich ganz bei Null angefangen. Auf einer grünen Wiese, wie es so schön heißt. 🙂 Also: mit einem neuen Ordner in meinem Theme-Verzeichnis, der erstmal nichts anderes enthielt als die drei leeren Dateien index.php, functions.php und style.css. Das sind die absoluten Basics, die WordPress benötigt.

So startest du immer, unabhängig von Sass oder einer Entwicklungsumgebung – auch wenn du ein Layout ganz normal direkt auf dem Server entwickelst und die Template-Dateien via FTP hochschiebst. Bei normalem CSS schreibst du den Code direkt in die style.css, bei mir kam stattdessen der Sass-Ordner mit den Partials hinzu.

Eine Handvoll HTML, gespickt mit Template Tags

Ergänzen wir die index.php gleich mal um die header.php und footer.php, die – surprise, surpise 😉 – den Code für den Kopf- und Fußbereich der Seite enthalten. In der index.php selber habe ich den Content erstmal sehr basic ausgegeben: anfangs nur die Überschrift und den Inhalt eines Beitrags, dann die Kategorien, das Datum und so weiter. Schließlich wurden aus der index.php verschiedene Template-Versionen für die Einzelansicht eines Artikels (single.php), für die Kategorien (category.php) und so weiter, jeweils immer ausgereifter.

Hervorragende Dienste leistete dabei wie immer die Übersicht über die Template Tags von WordPress. Denn auch wenn ich die allermeisten auswendig kenne – alle Variablen kann ich mir nicht merken, und ab und an ändert sich eine Funktion ja auch mal. Die kann ich dir also nur wärmstens empfehlen.

(Wie genau Templates in WordPress funktionieren, würde hier endgültig den Rahmen sprengen. Das erkläre ich vielleicht demnächst mal in einem eigenen Beitrag. 🙂 )

Von Partial zu Partial

Den Sass-Code habe ich parallel zum HTML entwickelt, d.h. immer wenn ich ein Element ins HTML gebaut habe, wurde es auch gleich gestylt. Dadurch kamen mit der Zeit neue Partials hinzu, etwa die _comments.scss für die Anzeige der Kommentare, _article.scss für die Beiträge selber oder _sidebar.scss für das Styling der Sidebars. In der _variables.scss definiere ich alle Variablen wie beispielsweise die Farbwerte, in der _mixins-extends.scss logischerweise eben die Mixins und Extends.

Wie viele Partials du anlegst, wie du sie aufteilst und wie du sie benennst, bleibt letztlich dir überlassen und hängt auch vom Umfang des Projekts ab. Wichtig ist halt, dass sie ihren Zweck erfüllen: sie sollen deinen Code übersichtlich aufsplitten und nicht zusätzlich kompliziert machen. 😉

Mobile First

Ich bevorzuge den sogenannten Mobile First-Ansatz: anstatt das Layout erst für große Monitore zu Ende zu entwickeln und dann Sonderregeln für Smartphones und Tablets zu definieren, gehe ich den umgekehrten Weg. Ich beginne mit der minimalistischen Darstellung für kleine Bildschirme und erweitere sie dann für Tablets und schließlich größere Monitore. Das hat den Vorteil, dass ich jedes Element erst einmal wirklich auf das Wesentliche reduzieren muss. Und das schadet schließlich auch für große Bildschirme nicht. 😉

Je größer der Bildschirm wird, desto mehr Weißraum kannst du beispielsweise hinzufügen. Hier auf neontrauma.de verändert sich zum Beispiel der freie Bereich um das Logo (das kannst du einfach ausprobieren, indem du das Browserfenster kleiner ziehst). Dein Layout kann mehrspaltig werden, eventuell bietet es sich auch an, einzelne Textelemente größer werden zu lassen, und so weiter.

Testen, testen, testen

Während ich code, behalte ich die Ausgabe natürlich immer im Blick.

BrowserSync leistet da verdammt gute Dienste, weil es die Seite im Browser automatisch aktualisiert, sobald sich am Code etwas geändert hat. Sogar andere Devices wie das Smartphone können damit gekoppelt werden.

Am besten ist es, wenn du dein Layout auf verschiedenen Geräten testest. In der Regel sind da keine allzu großen Abweichungen zu erwarten, wenn du es sauber responsiv geschrieben hast und es dadurch bei jeder Bildschirmauflösung gut aussieht. Und da du aller Wahrscheinlichkeit nach nicht mal eben ein paar Dutzend unterschiedliche Smartphones neben dir liegen hast, tut es auch eine Simulation:

Über die Taste F12 bzw. Rechtsklick ins Browserfenster –> Element untersuchen gelangst du in den meisten Browsern in die Entwickler-Ansicht. Hier siehst du nicht nur den HTML-Code mitsamt dem zugehörigen CSS, sondern kannst auch mobile Geräte emulieren.

Im Chrome – meinem Standardbrowser – sieht das dann so aus:

Emulation in Chrome

Emulation in Chrome

Wie es halt so ist – wie viel ich auch getestet habe, das ein oder andere ist mir bisher bestimmt durch die Lappen gegangen. Wenn bei dir also irgendetwas schief aussieht, freue ich mich über einen Hinweis. 😉

    Kommentare

  1. Bee am 9. April 2015 um 23:15:

    Auf den ersten Blick am iPad fällt mir auf, dass die Lupe oben rechts halb verdeckt vom Suchfeld ist.
    Ansonsten finde ich es auf den ersten Blick ganz anders, aber sehr gut.

    • Anne am 10. April 2015 um 6:56:

      Hej Bee,

      danke, das Icon hab ich gerade gefixt. 🙂

      • Bee am 10. April 2015 um 8:38:

        So… Ich hab noch mal genau geguckt. Mit dem iPad sehe ich links bei Pinterest nur 1 Bild, auf dem Handy sehe ich 3.
        Wenn ich Deine Seite auf dem Handy aufrufe, sehe ich nur die linke Hälfte deiner Seite, ich muss erst kleiner zoomen um alles zu sehen.

  2. Steffen am 10. April 2015 um 8:26:

    Sehr interessant. Da bekommt gleich Lust mal wieder ein paar Zeilen Code zu schreiben. SASS klingt wirklich interessant. Und Bourbon scheint mir einige Probleme zu lösen, die man jedes mal wieder hat. Danke.

  3. Danny am 10. April 2015 um 9:34:

    SASS/LESS sind wirklich was tolles, durfte ich beruflich auch schon nutzen.
    Haha, das mit dem „Ich bin Webdesigner und benutze ein fertiges Theme!?“ habe ich mir auch schon öfter gedacht 😀 vielleicht kann ich mir ja auch irgendwann mal ein bisschen Zeit freischaufeln…

    • Steffen am 10. April 2015 um 10:35:

      Ja aber ich finde, dass es keine Schande ist. Je nach Kundenbudget teilweise kaum anders zu realisieren. Dank Childthemes kann man dennoch weitreichende Anpassungen vornehmen und erkennt die Themes teilweise gar nicht wieder. Ich schiebe meine eigene Website seit Jahren vor mir her. Aber man sieht hier gut, dass es viel Aufwand ist heutzutage ein ganzen Theme samt Responsiveness zu erstellen. Alle Eventualitäten der verschiedenen Auflösungen zu berücksichtigen ist wirklich eine Herausforderung.

      Ich persönlich habe auch gar nichts gegen klassische Website mit fester Breite. Häufig sind mir diese lieber, weil umfang-/funktionsreicher als angepasste Seiten.

      Aber das ist Geschmackssache.

  4. Netti Nordlicht am 10. April 2015 um 13:20:

    Gut geschrieben! Ich habe gleich ein eigenes Theme programmiert, allerdings müsste ich es auch langsam mal responsive machen. Momentan benutze ich noch das WPtouch Mobile Plugin für die Smartphone-Ansicht. 😉

  5. Changiereffekt am 10. April 2015 um 14:03:

    Hallo Anne,

    dein Redesign gefällt mir. Es ist super angenehm zu lesen, sehr übersichtlich und in sich stimmig.
    Dein altes Design war chic, aber manchmal fühlte ich mich aufgrund des Magazin-Looks dort doch ein wenig verloren. Jetzt hat neontrauma wieder was von einem klassischen Blog – das trifft genau meinen Geschmack. 🙂

    Ich muss dir gestehen, dass ich den Teil über Sass nur überflogen habe. 😀 Da wurden meine Augen schon ganz eckig bei so viel Code. Meinst du denn, es lohnt sich, da näher einzusteigen und es auch als Nicht-Webdesigner zu lernen bzw. sich näher damit zu beschäftigen?

    Beste Grüße

  6. Lara am 10. April 2015 um 15:49:

    Tolles neues Layout Anne! Ich mag vor allem die farbliche Anpassung der Headbar – wirkt sommerlicher als vorher. Bei vielen anderen Sachen ist es ja wie immer: man selbst freut sich am meisten drüber & Besucher merken es eh erst, wenn was fehlt, was sie gewohnt waren. 😉
    Mein nächstes Design will ich auch komplett selbst machen – das habe ich jahrelang so gehandhabt und durch die ganzen responsive-geschichten bin ich davon weg. Aber jetzt auch mit deinen Anreizen in Sachen Sass und Bourbon (ich mag den Humor dieser Leute^^), könnte das ja mal gemacht werden. 😉

    Liebe Grüße
    Lara

  7. Christiane am 10. April 2015 um 16:57:

    Sehr schön 🙂

    Mir gefällt die Farbwahl. Und Diana geb ich recht, durch die neue Struktur verliert man sich nicht mehr so inhaltlich…

    • Christiane am 11. April 2015 um 12:25:

      Ich hatte heut morgen eine nicht ganz responsive Startseite aufn Handy: Inhalt war zu breit, Bilder nicht runter skaliert.

      iPhone und Safari 🙂

  8. Verena am 11. April 2015 um 11:28:

    Finde das Layout viel besser, als das vorherige. Jetzt ist es viel übersichtlicher.

  9. Rückblick KW 15 | Kaddyverse am 12. April 2015 um 16:51:

    […] von neontrauma hat ihr Bloglayout redesignt und uns beschrieben, wie sie das gemacht hat, welche Tools sie benutzt hat uns …. Wer also ein bisschen Nerdblut in seinen Venen fließen hat und sich ein wenig mit dem Thema […]

  10. Allie am 13. April 2015 um 10:52:

    hi:9 dein neues design gefällt mir super! schaue es grade über einen pc an und es sieht alles so schön ordentlich aus und die hellen farben sind wirklich angenehm!

    mit CSS kenn ich mich eh nicht so gut aus, das was du da auf die beine gestellt hast, kommt für mich gar nicht in frage. da müssen immer vorlagen her und immerhin kann ich die nach 2 jahren bloggen inzwischen auch anpassen :D:D

    mit sass kann ich mir noch zeit lassen… 😀

    liebst,
    allie

  11. Judith P. am 14. April 2015 um 7:38:

    Wow der bisher interessanteste Beitrag auf deinem ganzen Blog.
    Das Layout gefällt mir auch gut, wobei ich das vorher auch sehr schön fand. Die Farben sind jetzt aber besser als schwarz. Allerdings mag ich diesen Magazin Style total und nicht so gerne diese Struktur, die total nach Blog aussieht. Aber das ist Geschmackssache.

    Tja mich trifft das gleiche Schicksal, als Webdesigner würde ich auch sooo gerne mein eigenes Theme designen. Und am liebsten würde ich auch Sass lernen. Bisher habe ich damit nämlich noch nicht gearbeitet.
    Aber ich weiss echt nicht wo ich so viel Zeit hernehmen soll. Hab schon Mühe genug Freizeit freizuschaufeln, um jede Woche etwas zu posten.

    das mit dem Design Layout würde mich übrigens auch interessieren. Ich habe jetzt schon öfter gelesen, das Webdesigner direkt mit der Programmierung anfangen und nicht erst designen. Wie handhabst du das? Hast du zuerst Photoshop bemüht?

    • Anne am 15. April 2015 um 6:59:

      Na, ich hoffe, dass die anderen 1000 Beiträge hier nicht ganz so uninteressant sind. 😀

      Ich arbeite da recht unterschiedlich. Wenn ich ein komplett neues Layout für einen Kunden mache, fange ich tatsächlich meist mit Skizzen auf Papier an. Hier bei neontrauma.de wusste ich aber sehr genau, wie es aussehen sollte, weswegen ich direkt mit dem Code begonnen habe. Grundsätzlich bin ich nicht so ein Fan von Photoshop-Mockups… das dauert mir im Verhältnis zum Coden zu lange, da schreibe ich lieber direkt das HTML und CSS runter. 😉

  12. Judith P. am 14. April 2015 um 7:40:

    Was mir grad noch auffällt. In der Adressezeile wir noch php angegehängt. Das finde ich persönlich nicht so schön. Könnte man doch bestimmt auch wegmachen. Aber eilt ja nicht. ist ja nur ne Kleinigkeit.

    • Anne am 15. April 2015 um 6:55:

      Ah, jetzt wo du mich dran erinnerst… das steht seit Ewigkeiten irgendwo weiter unten auf meiner To Do-Liste. Ist eigentlich sehr easy, die Endung da rauszunehmen, ich muss nur mal gucken, wie ich die alten URLs dann sauber redirecte. Danke fr’s Erinnern. 😉

  13. kaddinator am 17. April 2015 um 15:25:

    Mir gefällt die Farbwahl total gut. Ist alles n bisschen lockerer.
    Ich bin für ein komplett selber erstelltes Layout leider zu faul, bzw. zu sehr aus dem Thema raus. Aber ich bin auch nie mit einem bereits vorhandenen Layout zufrieden und doktore immer ein wenig daran rum.

  14. maTTes am 7. Mai 2015 um 9:05:

    Schöne Beschreibung 🙂
    Gehe ich aber richtig davon aus, dass deine Workflows nur unter Mac bzw. Linux funktionieren, u.a. wegen SASS/LESS etc.?

  15. Katjana am 7. August 2015 um 13:19:

    Mit Sass hatte ich schon was in der Uni zu tun, aber als Framework lernte ich Foundation kennen. Ironischerweise nutze ich beides privat gar nicht. Aber nach deinem Artikel werde ich mich, sofern sich Zeit finden lässt, nochmal genauer damit beschäftigen. Möchte schließlich später in eine solche berufliche Richtung einsteigen bzw. hoffe dass ich dann beruflich was mit Web zu tuen haben werde.

    Super Arbeit^^

    Liebe Grüße
    Katjana

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.