Bloggen

Redesign! Wie ein responsives Layout mit Sass entsteht

Hier bloggt neontrauma / Anne:

Ich bin Anne Schwarz, 29 Jahre alt. Ich arbeite in Köln und wohne mit meinem Mann, Hund und Katze noch in Leverkusen, bald wieder auf dem Land. Das ♥ schlägt für die Fotografie & das Schreiben. Möchtest du mehr erfahren?

Hinterlass mir einen Kommentar :)

24 Kommentare

  1. 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.

      1. 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. 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.

    1. Hattest du dir vorher ein Layout gescribbelt? Oder in Photoshop vorgebaut?

  3. 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 :D vielleicht kann ich mir ja auch irgendwann mal ein bisschen Zeit freischaufeln…

    1. 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. 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. 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. :D 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. 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. Sehr schön :)

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

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

      iPhone und Safari :)

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


  9. 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… :D

    liebst,
    allie

  10. 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?

    1. Autor

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

      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. ;)

  11. 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.

    1. Autor

      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. ;)

  12. 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.

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

  14. 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 markiert *