Kommentare 22

Tipps & Tools zur Webseiten-Gestaltung direkt im Browser

Seit längerem bin ich ein Fan des Artikels “Make your Mockup in Markup” von Meagan Fischer bei 24ways.org. Im Artikel schreibt Meagan über das Konzept, Webseiten direkt im Browser zu gestalten, und auf eine Gestaltungsvorlage in Photoshop oder anderen Grafik- und Layout-Programmen zu verzichten. Eigentlich ist die Argumentation logisch: Warum sollte man ein Produkt nicht direkt in der Plattform (also im Browser) gestalten, in der es auch später genutzt wird?

I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.
Meagan Fischer, “Make your Mockup in Markup”

Außerdem stellt sich die Frage, ob diese Arbeitsweise nicht sogar viel effizienter ist, da man Änderungen wie Farben, Schriften oder Schriftgrößen im CSS ja viel schneller anpassen kann. Und bei einem Kundenprojekt kann man so schnell mehrere Design-Optionen direkt in der Browser-Ansicht präsentieren, ohne das gesamte Layout im Grafikprogramm umgestalten zu müssen.

Besonders Für Designer, die über das klassische Grafikdesign zum Webdesign gekommen sind (wie ich selbst), ist das Konzept im ersten Moment sicher etwas ungewohnt. Dazu kommt, dass man alte Gewohnheiten bekanntlich ja immer nur sehr schwer wieder los wird. Da ich aber ebenfalls der Meinung bin, dass die Webseiten-Gestaltung im Browser letztendlich zeitsparender, effizienter und moderner ist, habe ich hier praktische Tools für diese Arbeitsweise zusammen gestellt.

1. Hilfreiche CSS / HTML Vorlagen

Bei der Erstellung einer Webseite musst du auf keinen Fall jedes mal wieder komplett neu mit der Programmierung anfangen. Es gibt etlich praktischen HTML / CSS Vorlagen, die dir beim Projektbeginn weiterhelfen können.

HTML5 Boilerplate

Möchtest du deine Webseite in HTML5 umsetzen, kannst du den Code der HTML5 Boilerplate als Vorlage verwenden. Das praktische Kit für Webseiten-Entwickler bietet eine Code-Vorlage in HTML5, die auch kompatibel für ältere Browser ist und außerdem eine praktische Code-Vorlage für die Nutzung von CSS3 Media Queries anbietet.

Webdesign direkt im Browser
Ein Auszug aus der Code-Vorlage von HTML5 Boilerplate.

Eine genaue Beschreibung (in deutscher Sprache) findest du auf der Webseite http://de.html5boilerplate.com.

1140px flexibles Grid mit CSS3 Media Queries

Das 1140px CSS-Grid ist eine interessante Option, wenn du deine Webseite mit CSS3 Media Queries für verschiedene Screen-Größen optimieren möchtest. Du kannst das Grid-System als HTML/CSS Vorlage nutzen, und darauf aufbauend mit deinem CSS-Styling beginnen.

Aus meiner eigenen Erfahrung ist des bei der Arbeit mit CSS3 Media Queries besonders sinnvoll, direkt im Browser zu gestalten. Denn durch die flexiblen Größen solltest du dein Design sowieso ständig im Browser testen und die Gestaltung eventuell anpassen.

Im Artikel “Das 1140px Grid-System: Mit CSS3 Media Queries für mobile Geräte optimiert” findest du außerdem eine ausführliche Beschreibung zum 1140er Grid.

Gridinator

Mit dem kleinen, praktischen Online-Tool Gridinator kannst du eigene CSS / HTML Vorlagen für deine Webdesigns erstellen.

Webdesign direkt im Browser

Das Tool ist simpel aufgebaut, so dass du dir schnell ein Grid erstellen, und die CSS- und HTML-Vorlage dann anschließend als erste Grundlage für deine Programmierung verwenden kannst.

2. Browser-Tools für Grid-Layouts

Nachdem du die HTML/CSS Grundlage für deine Webseite erstellt hast, kannst du mit der Layout-Gestaltung im CSS beginnen. Praktische Helfer sind dabei Grid-Layout Tools und Addons, mit deren Hilfe du dein Design im Browser viel leichter testen kannst.

Grid-Fox

Grid-Fox ist ein praktisches Tool, um Webseiten-Layouts in Mozilla Firefox zu überprüfen.

Webdesign direkt im Browser
Das Grid kannst du über die Addon-Einstellungen in Firefox anpassen.

Bookmark für das 960er Grid

Gestaltest du ein Webdesign im 960er Grid, kannst du das praktische Bookmark Gridder nutzen, um dein Layout in verschiedenen Browsern zu kontrollieren.

Grid-Bookmark von Allan Jardine

Ein eigenes, flexibles Grid-Bookmark für den Browser kannst du dir mit dem JavaScript-Bookmarklet Grid erstellen.

Webdesign direkt im Browser

Slammer für Mac

Mit Slammer (das Tool kostet 20$) haben Mac-User die Möglichkeit eigene Grids aufzubauen, und als Overlay für Safari und andere Programme zu nutzen. Es gibt jede Menge Anpassungs-Möglichkeiten und Layout-Themes für das Programm.

3. Test und Entwicklung des Designs

Während du an der Gestaltung deines Webdesigns arbeitest, sind praktische Entwickler-Tools für deinen Browser unverzichtbar. so kannst du deine CSS-Styles und den HTML-Code im Browser schnell überprüfen.

Das Entwickler-Tool von Google Chrome

Mein derzeitiger Lieblings-Browser ist Google Chrome, daher nutze ich inzwischen eigentlich nur noch das praktische Chrome Entwickler-Tool (rechte Maustaste, “Element untersuchen” auswählen), um Code im Browser zu überprüfen.

Webdesign direkt im Browser
Die Übersichtlichkeit gefällt mir bei der HTML/ CSS Entwicklung in Chrome besonders gut.

Firebug für Firefox und Chrome

Um deine Webseite in Firefox zu testen und den Code gegebenenfalls anzupassen, kannst du das beliebte Firebug-Addon nutzen. Firebug gibt es übrigens auch als Chrome-Erweiterung.

Web Developer-Addon für Firefox

Neben Firebug ist auch noch das Firefox-Addon Web Developer-Addon für Firefox hilfreich.

Wie ist deine Meinung?

Bist du ein großer Fan von Photoshop & Co oder kannst du dir durchaus vorstellen, auf Grafik- und Bildbearbeitungsprogramme bei der Gestaltung von Webseiten komplett zu verzichten? Welche Arbeitsweise ist deiner Meinung nach effizienter, und welche Vor- oder Nachteile siehst du in der Webseiten-Gestaltung direkt im Browser?

Über deine Einschätzung zum Thema, und deine weiteren Tipps und Tools für die Webdesign-Gestaltung im Browser würde ich mich sehr freuen!

22 Kommentare

  1. Hallo Ellen,

    vielen Dank für diesen tollen Artikel auch ich habe diese Meinung schon länger in meinem Kopf. Durch deinen Artikel aber auch durch den von Meagan Fischer bin ich nun richtig überzeugt worden. Und die ganzen Tools kannte ich auch noch nicht.

    Vielen Dank dafür.

    • Hallo Kevin,

      freut mich, dass dir der Artikel und die Tool-Tipps gefallen haben. Ja, ich denke es ist etwas Gewöhnungssache, aber Schritt für Schritt kann man die Grafikprogramme sicher immer mehr überspringen :-)

      Viele Grüße,
      Ellen

  2. Natürlich ist es sinnvoller eine Webseite direkt im Browser zu erstellen, weil man schneller sieht, wie das Ergebnis letztendlich aussehen wird. Das Schreiben von Code in einem Texteditor und dann Strg-R im Browser (Reload) ist schon lästig.
    Cool wäre ein HTML/CSS-Editor-Addon für gänge Browser das On-The-Fly die Website beim Tippen des Codes reloaded.

    • Hallo Dominique,

      ja du hast Recht, ich denke dahin wird die Entwicklung auf jeden Fall gehen. Und hoffentlich wird es in der Zukunft dann noch praktischere Addons und Entwickler-Tools geben :-)

      Viele Grüße,
      Ellen

  3. Olaf

    Wie immer ein toller Artikel!

    Ganz ehrlich? Ohne Firebug könnte ich nicht leben… :) …oder anders gesagt, 10 Stunden ohne, sind so produktiv wie 10 Stunden MIT !

    …so gehts mir jedenfalls…

    • Halo Olaf,

      ja, ich war auch immer ein großer Fan von Firebug, aber im Chrome gefällt mir das Browser-eigene Entwickler-Tool echt noch besser. Probiere es mal aus, ist klasse :-)

      Viele Grüße,
      Ellen

        • Chrome eine Datenkrake?
          Ganz unrecht hast du da sicherlich nicht, aber wenn du facebook nutzt, dann muss dich Google nicht mehr interessieren. Facebook ist schlimmer…

          Sonst kannst du einmal Safari testen, es sind meiner Meinung nach grosse Parallelen zwischen den beiden Entwickler Tools :D

          Im übrigen giebt es Tools welche genau diese Entwickler Tools von Chrome oder Safari zur nutze machen. Die bekommt man beide OpenSource…

        • Olaf

          Ähm… wenn ich über Chrome schimpfe muss ich vorher zu Facebook schauen? :) Das ist doch Käse – Außerdem nutze ich Facebook ca. einmal die Woche (oder zwei)…

          Bei Chrome mach ich mir da richtig Sorgen, im Gegensatz zu Facebook hab ich da nicht nur ein “kleines Facebook-Kekslein eingezäunt”, sondern ein installiertes Programm, in freier Wildbahn “Mein PC” genannt :( DAS fürchtet mich dann eher…

        • Zitat: wenn ich über Chrome schimpfe muss ich vorher zu Facebook schauen?

          Habe ich nicht so gesagt, noch so gemeint! Jedoch ist Facebook eine Datenkrake, dazu kommt noch, dass viele Leute dort Persönliche Dinge preisgeben und dies macht Facebook so gefährlich. Es ist möglich, dass dies in deinem Fall nicht so ist, aber es ist häufig.

          Bei Google (nicht chrome) werden zwar auch Benutzerverhalten und der weiteren analysiert, aber sie können nicht sagen, dass dies genau diese Person ist usw. Jedoch, und das ist das Aber, können sie mit Google Chrome dein Benutzerverhalten sehr genau anschauen und auch immer wieder sagen das du es bist, aber wer du bist wissen sie nicht. Was sie genau alles auswerten weis wohl nur Google selbst, aber nur Prozesse vom Internet, also welche du in Chrome tätigst und keine von deinem PC. Sie können dir nicht sagen ob du jetzt z.B. Photoshop installiert hast oder nicht, ob es ein plagiat ist oder nicht. Auch vor den Passwörtern musst du keine Angst haben, Lesezeichen evt. ein bisschen, da du diese auch mit Google synchron halten kannst…

        • Olaf

          “Was sie genau alles auswerten weis wohl nur Google selbst, aber nur Prozesse vom Internet, also welche du in Chrome tätigst und keine von deinem PC. ”

          Und genau dabei bin ich mir da sehr unsicher… wie gesagt, es ist kein kleiner lustiger Keks mehr, sondern ein ganzes Programm…

        • Keks? ich nehme gerne einen :P

          Also mir sind momentan nur zwei Super Entwickler-Tools welche im Browser integriert sind bekannt.

          Google Chrome… wobei da gewisse Angst von Datenkraken haben…

          Safari Wobei nicht alle gut auf ein angeknapertes Gemüse zu sprechen sind…

          Opera, Firefox wüsste ich mir nur mit Plugins zu helfen und was ich vom IE halte möchte ich gar nicht sagen…

          Was man aber beachten sollte ist, dass verschiedene Entwickler in ihre Schreibsoftware gleichzeitig die Webkits von Chrome oder Safari integrieren. Smultron währe solch ein beispiel, welches mit einer älteren Version sogar OpenSource ist. Für die Fenster User ist mir gerade nichts bekannt, aber da gibt es sicherlich auch was.

        • Hallo Olaf,

          wenn du dich bei der Internet-Nutzung von Google nicht so wohl fühlst, könntest du den Browser auch nur für die Entwicklung nutzen. Ich installiere mir WordPress immer lokal, um an neuen Projekten zu arbeiten. So kann man dann sogar auch noch offline weiter programmieren :-)

          Viele Grüße,
          Ellen

        • Olaf

          Du Ellen, ich würde mich nicht wohl fühlen Chrome überhaupt nur installiert zu haben!!! :)

  4. Moin Ellen,

    ich arbeite bereits seit langem mehr oder weniger nach dem Prinzip und habe beste Erfahrungen damit gemacht. Natürlich mache ich auch einiges in Photoshop, aber die meiste Gestaltungsarbeit läuft bei mir im Browser ab. Eben weil ich dann das Ergebnis sofort sehen kann und ich bin halt sehr ungeduldig ;-)

    • Hallo Michael,

      vielen Dank für dein Feedback zum Artikel. Ja, ich denke auch, die Entwicklung im Browser ist letztendlich einfach sehr viel praktischer. Und vor allem bei Schriften finde die Browser-Ansichten auch sehr unterschiedlich, im Vergleich zu den Adobe Programmen (z.B. bei font-weight und line-height).

      Außerdem kann man bei der Gestaltung in CSS auch schnell die unterschiedlichen Browser testen, und Styles so gleich für mehrere Browser kompatibel anpassen :-)

      Viele Grüße,
      Ellen

  5. Ich weiß nicht … klar, dass die von Dir zitierten Tools eine große Hilfe sind. Firebug & Co nutze ich täglich, es beflügelt meine Produktivität, und da ist für mich auch ganz klar, dass ich ohne nicht gut arbeiten könnte. Die Browser-Grids empfinde ich ebenfalls als hilfreich, aber immer mehr im Sinne eines Kontrollinstrumentes.

    Ich persönlich habe allerdings nach einigen Jahren exzessiven Einsatzes dieser Werkzeuge für mich festgestellt, dass ich mit einem Grafikprogramm (zum Beispiel Fireworks oder Photoshop) genauer, konsistenter und vor allem zielstrebiger arbeiten kann. Und *dann* mein HTML & CSS schreibe, dies *dann* auf die Kleinigkeiten abklopfe, die nicht so funktionieren wie ich das gedacht habe.

    Vielleicht bin ich da einfach zu ‘old school’, aber mir geht beim geklicke im Browser oft das handwerkliche verloren. Wenn ich etwas mal schnell im Browser editieren kann, dann muss ich mir ja gar keinen Kopf drum machen, wie ich meine Daten effizient und sinnvoll aufbaue. Und wenn ich das nicht tue, dann macht es meistens zum Projektende mehr Arbeit als es zu Anfang spart.

    Debuggen ja, entwickeln nein. Aber beim debuggen dann noch etliche Tools mehr – von YSlow über FirePHP und Consorten bis hin zu Grid-Tools das ganze Programm.

    Carolina

    • Hallo Carolina,

      vielen Dank für dein Feedback zum Thema “Gestalten im Browser”. Ja, du hast Recht, da ich selbst aus dem Grafikdesign komme, bin ich eigentlich auch sehr an die Gestaltung in Grafik-Programmen gewöhnt :-)

      Doch meiner Erfahrung nach werden Browser als eigentliche Arbeits-Plattform immer effizienter, und die Entwicklung geht ja auch recht schnell voran. Ich selbst merke (vor allem seitdem ich Chrome als Standard-Browser nutze), dass ich immer lieber direkt im Browser gestalte, und so die Ergebnisse sofort testen live kann :-)

      Viele Grüße,
      Ellen

  6. Liebe Ellen, auch von mir noch ein verspätetes Dankeschön für diesen sehr interessanten Artikel. Es ist schon so, wenn man das Layout zuerst in Photoshop gestaltet, macht man vieles doppelt. Und gerade bei Kundenprojekten hat die investierte Zeit ja immer auch einen Einfluss auf den Preis. Wenn man mit XHTML und CSS genügend Erfahrung hat, sollte es eigentlich nicht allzu schwer sein, Gestaltung und Programmierung in einem Schritt zu erledigen. Bei meinem nächsten Projekt probiere ich das sicher mal aus. Vielen Dank für die guten Tipps :) Liebe Grüsse von Barbara

Schreibe eine Antwort