Webdesign und Webdevelopment: Arbeitsweise und Tools

Hallo liebe Community,

ich verdiene mir von Zeit zu Zeit etwas nebenbei mit dem Aufbau von Webpräsenzen. Da ich das Gefühl habe mit jedem Auftrag irgendwie wieder bei Null anzufangen, wollte ich mal fragen wie euer Arbeitsablauf ist und welche Programme bzw. Tools ihr nutzt.

Mein Anliegen ist es meine Arbeit möglichst weit zu Standardisieren, also die Arbeitsschritte unabhängig vom späteren CMS oder Shopsystem zu gestalten. Meine Projekte sind bisher nicht sehr anspruchvoll gewesen (Fotografenwebsite und Magentoshop mit leicht angepassten fertigen Template). Also hier ist mein Vorschlag:

1. Erstellen eines Mookups mit der Freeware Pencil von Evolus
2. Vollständige grafische Umsetzung in Gimp oder am liebsten Photoshop (Illustrator besser?)
3. Programmieren der Website mit Scriptly von Weboctron (Nicht komplette Funktionalistät, nur Grafiken, CSS etc.). Hier möchte ich stets Bootstrap gleich mit einbauen.
4. Erstellen eines Templates für das gewählte CMS oder Webshopsystem auf der Grundlage von Punkt 3.

Jetzt bin ich zudem am Überlegen, ob ich wieder mit LESS arbeite. Ich empfand es soweit als angenehmes Arbeiten. Gestört hat mich nur das nachträgliche Bearbeiten einzelner Elemente: Das Auswählen der Selektoren über die Developer-Extension von Firefox und das dadurch einfache Auffinden in der CSS-File ist ja mit LESS nicht möglich.

Ich bin mir schon bewusst, dass ich mir bei Punkt 3 etwas mehr Arbeit mache, aber dafür habe ich dann immer eine Grundlage für den nächsten Schritt.

Was haltet ihr davon und wie geht ihr denn vor?

Liebe Grüße

Bazzey

Ich lasse den zweiten Schritt fast komplett raus und baue gleich alles in CSS, da viele Sachen nun auch ohne Photoshop möglich sind wie font icons, Verläufe, Schatten usw. somit habe ich schon wie ne Art Prototyp den man zeigen kann und am ende kann man das CSS finalisieren, wenn soweit alles dem Wunsch entspricht. Ich nutze übrigens auch Bootstrap.

sebazzey schrieb:

[*]Vollständige grafische Umsetzung in Gimp oder am liebsten Photoshop (Illustrator besser?)

Zum Vergrößern anklicken....

GIMP + Inkscape
Du wirst eh nicht viel mit tatsächlichen Grafiken machen, sondern willst ja nur ein Gefühl für die räumliche Aufteilung und Farbthematik bekommen.
Allen Bildbearbeitungswerkzeugen ist ein Problem gemeinsam: Sie können dir nicht zeigen, was an Interaktion möglich ist, vor allem bei Responsive Design scheitern sie kläglich.


Mein persönlicher Ablauf:
- für n CMS entscheiden... wobei es am Ende aus Gewohnheit eh immer Contao wird.
- mit dem Kunden darüber REDEN, was er nun eigentlich braucht und will. Hier wird oft geschlampt.
- Screenraster skizzieren für die verschiedenen Zustände (Bildschirmbreiten/Eingabemedien), dafür brauchts nur Karo-Papier und n Kuli
- Farbthema überlegen. Man erstellt ja selten Seiten für komplette Neugründungen, meist existiert eh schon ein CD, an das man sich halten muss.

Was Bootstrap und sonstige CSS Frameworks angeht: Nä, einfach nä!
Die bringen alle viel zu viele CSS Resets mit, die man dann händisch wieder überarbeiten muss. Am "geilsten" find ich ja die Dinger, die <ul> und <ol> komplett zurücksetzen. Wenn man dann mal ne Liste mit mehreren Ebenen schreiben will (soll ja vorkommen), darf man zig Zeilen CSS schreiben, die jeder Browser eigentlich genau so macht.
Außerdem haben diese Frameworks immer was Aufgeblasenes. Wozu soll ich Elemente formatieren, die ich eh nicht verwende? Wenn mein Kunde kein Fall für Zitate ist, warum sollte ich dann auch nur ein Byte für <blockquote> verschwenden?

Was deine Probleme mit LESS angeht: Kann ich nachvollziehen. Ich wollt auch schon längst mal mit LESS oder SASS arbeiten, am Ende macht das aber mehr Ärger als die Sache wert ist. Damit verliere ich nur die leichte Zugänglichkeit durch die Browser Entwicklertools. Das ist es nicht wert. Schöner Gedanke, schöner Ansatz, aber mit meinem Stil einfach nicht zu vereinbaren.
Übrigens: die Werkzeuge vom Chrome sind denen vom Firefox um Welten überlegen.

Edit: Weil ichs grad gefunden hab...
http://contao-konferenz.de/vortraege/kill-photoshop.html <- ich steh nicht allein da mit dem Gedanken, ohne Bildbearbeitung zu arbeiten.

Hey, vielen Dank für eure Antworten.

Gerade wegen der Wichtigkeit von responsive Designs dachte ich müsste man gerade ein Framework haben. Bootstrap macht da seine Sache ganz gut, glaube ich.

Und deshalb werde ich auch wohl wieder mit Less arbeiten. Bevor ich nämlich für jedes Bildschirmset alles immer neu definiere, bestimme ich lieber alles nur ein mal über LESS. Steht nur dem genannten Nachteil gegenüber.

Aber ansonsten ist meine Arbeitsweise abgesegnet, ja?

Ich arbeite auch ohne Frameworks. Bootstrap macht seine Sache zwar gut, aber wie Daaron schon sagte sind da viele Dinge definiert, die du eigentlich nicht brauchst. Das bläht das Ganze zusätzlich auf.

Grundsätzlich designe auch ich im Browser und höchstens noch auf dem Papier ein wenig. Schon die Einarbeitung in ein so mächtiges Programm wie Gimp oder Photoshop ist es mir nicht wert, wenn ich in gleicher Zeit per HTML und CSS das selbe im Browser erreichen kann - und das auch noch für verschiedene Auflösungen.

Meine Arbeitsweise bei den meisten Projekten sieht in der Regel so aus:

- Erstes Gespräch mit dem Kunden um Wünsche und Anforderungen aufzunehmen + Beratung, was machbar und sinnvoll ist.
- Nachdem die Grundanforderungen klar sind wird ein HTML + CSS Grundgerüst mit Platzhalterbildern und Texten aufgesetzt und präsentiert. Wenn es da noch Wünsche gibt, wird das dann umgesetzt.
- Wenn der Kunde sein Ok zum Design und Aufbau gibt, wird das Ding (sofern notwendig und gewünscht) in ein CMS integriert.
- Nun kann der Kunde Inhalte einpflegen (wenn er das CMS beherrscht, meist gebe ich Schulungen), oder ich mache das auf Wunsch selbst.
- Anschließend kommt die Optimierung hinsichtlich Suchmaschinen, Veröffentlichung, Sicherheit und Geschwindigkeit.

Das Auswählen der Selektoren über die Developer-Extension von Firefox und das dadurch einfache Auffinden in der CSS-File ist ja mit LESS nicht möglich.

Zum Vergrößern anklicken....

Dazu musst du beim Kompilieren eine Sourcemap erstellen. In den DevTools steht dann die jeweilige Zeile im less File. Ein Editieren/Speichern des less Files direkt im Browser geht auch, sodass du die möglichen Änderungen nicht nochmal im Editor eingeben brauchst.

Bootstrap / Foundation verwende ich nur im schnelle Klickdummys oder Konzeptionen zu erstellen. Dieser Punkt erlaubt mir den Verzicht auf jegliche Umsetzung in Photoshop/Fireworks.

Lokal verwende ich Nodejs + Grunt bei Projektbeginn. Ich erstelle mir einen leeren Ordner und starte je nach Projektart von der Kommandozeile das jeweilige Template (selbst definiert).

Für ein Angular.js Projekt gebe ich dann nur grunt-init angular ein. Es werden automatisch alle Abhängigkeiten (Testtools, Libs, Git, Paketmanager) und verschiedene Tasks erstellt (bspw. automatische Generierung einer CSS-Sprite aus einem Bilderordner) geladen.

sebazzey schrieb:

Gerade wegen der Wichtigkeit von responsive Designs dachte ich müsste man gerade ein Framework haben. Bootstrap macht da seine Sache ganz gut, glaube ich.

Zum Vergrößern anklicken....

Frameworks machens ganz gut, eigene Lösungen perfekt.
Muss ich mir denn wirklich von anderen, z.B. einem Framework, erzählen lassen, wo meine Layout-Breakpoints sind? Das entscheide ich doch lieber selbst. Wenn es anfängt mies auszusehen muss ein Breakpoint her. Obskure Pixel - Entscheidungen anhand von aktuellen oder gar veralteten Mobile Devices bringen gar nichts. Nichts hasse ich bei CSS mehr als den blinden Einsatz "min-width:768px" (& Co).

Daaron schrieb:

Was Bootstrap und sonstige CSS Frameworks angeht: Nä, einfach nä!

Zum Vergrößern anklicken....

Grundsätzlich bin ich da bei Dir. Halte auch nicht viel davon, vor allem, wenn man nur bestimmte Teile braucht. Jetzt kommt aber das Aber: Bootstrap hat ja vor kurzem endlich einen SCSS-Port veröffentlicht. Ich hab mir das jetzt noch nicht genau angesehen, aber wenn es gut modular aufgebaut ist, dann kann man sich eben die einzelnen Komponente raussuchen, die man wirklich braucht.

Den Ansatz verfolgt auch Pure, wo es wirklich kleine und schlanke Module sind (Grid, Forms, Tables, etc). Ist jetzt natürlich mit insgesamt 4.5kb kein Monster a la Bootstrap, aber man muss ja auch nicht immer das Rad neu erfinden.

Daaron schrieb:

Die bringen alle viel zu viele CSS Resets mit, die man dann händisch wieder überarbeiten muss.

Zum Vergrößern anklicken....

Deswegen kein Reset, sondern Normalize

Daaron schrieb:

Was deine Probleme mit LESS angeht: Kann ich nachvollziehen. Ich wollt auch schon längst mal mit LESS oder SASS arbeiten, am Ende macht das aber mehr Ärger als die Sache wert ist. Damit verliere ich nur die leichte Zugänglichkeit durch die Browser Entwicklertools. Das ist es nicht wert. Schöner Gedanke, schöner Ansatz, aber mit meinem Stil einfach nicht zu vereinbaren.

Zum Vergrößern anklicken....

Also DAS kann ich wirklich nicht unterschreiben. Seitdem ich mit SCSS arbeite will ich nie wieder "normales" CSS schreiben müssen. Wenn man die Datei- und Namensstruktur ordentlich aufbaut und auch innerhalb der einzelnen Dateien ordentlich alles benennt, dann ist es zwar immer noch etwas suchen, aber meiner Meinung immer noch reinem CSS weit überlegen. Mit SCSS macht mir CSS schreiben auch mehr Spaß, eben weil es aufgeräumter ist. Und wem das immer noch nicht reicht gibts ja SourceMaps für SCSS (wobei ich das aktuell noch nicht verwende in meinen Projekten).

Na ja, ich entwerfe halt wirklich seh viel direkt im Browserfenster. Ich hab mein nacktes DOM und ich hab eine grobe Gestaltung im Kopf. Danach erzeuge ich direkt in Chrome meine Selektoren und Deklarationen. Wenn am Ende alles hübsch aussieht gibts Copy/Paste in die CSS-File und noch etwas Nachbesserung und Kompression.
Solche Arbeitsweisen sind mit Präprozessoren einfach nicht unter einen Hut zu bringen.