[GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

AlexB · 22. Februar 2011 22:06

Ich möchte meine erste Homepage mit made simple erstellen (soll ja einfach gehen), HTML und CSS Kenntnisse sind vorhanden, deshalb eine Frage an die Webstyler und Programmierer unter Euch.
Wenn ich in made simple ein ganz „Individuelles Design“ erstellen möchte, dass bereits auf dem Papier vorhanden ist, wie gehe ich dabei am effektivsten vor, wie machen es die Profis unter Euch:
1. Die Themes und CSS werden ganz individuell programmiert, es handelt sich auch um ein individuelles Design
2. Man bedient sich eines Editors der erleichtert die Programmierarbeit, falls ja gibt es Vorschläge für einen Editor? Gibt es in Made Simple bereits einen Editor der als Modul mitgeliefert wird?
3. Man bedient sich bereits mitgelieferter oder freier Themes + CSS die ein ähnliches Design haben und ändert solange im Quellcode bis dieses passt?
4. Wie 3 nur werden die Themes + CSS über einen Editor bearbeitet und angepasst
Wie ist die richtige/einfachste Herangehensweise mit made simple, wie gehen die Profis von Euch sinnvoll vor?
Vielen Dank für Euer Feedback

Beitrag geändert von AlexB (26. Februar 2011 13:50)

mike-r · 23. Februar 2011 01:14

Wenn ich Dich aufgrund der Fragen richtig einschätze sollte Punkt 3 für Dich zielführend sein.

Punkt 1 kannst Du Dir selber erklären, indem Du einfach mal ein Seitentemplate genau anschaust. Im Prinzip ist das auch nur eine "normale" Webseite, wo die Inhalte durch Variablen ersetzt werden. Bspw. {menu} und {content}.
Diese Inhalte wie auch das HTML-Gerüst drumherum stylest Du ganz herkömmlich via CSS.

Editoren im Wysiwyg-Sinne oder zum Anklicken (Header=rot etc.) gibt es keine, der Code steht in Text-boxen.

nockenfell · 23. Februar 2011 10:23

Ich gehe jeweils wie folgt vor. Die Voraussetzung dafür sind gute Kentnisse in HTML/CSS. :

Schreiben des Templates extern von CMSms. Damit bist du flexibel in der Entwicklung.
Einfügen des Templates in CMSms. Danach alle Tags wie {menu}, {content} etc. einfügen. Dazu nimmst du am besten als Vorlage ein existierendes Template damit du weisst, wo du was einfügen musst. Für die Konfiguration des Menüs schaust du dir am besten bestehende Templates an und verwendest am anfang die dort verwendenen CSS IDs und Klassen
CSS einbinden (das kann in der Datenbank wie auch extern erfolgen)

nicmare · 23. Februar 2011 10:29

ich machs wie nockenfell. zeichne in photoshop das design, slice es und schreibe das html markup händisch in dreamweaver. mache hier schon crossbrowser tests.
hier nehme ich keine besondere rücksicht auf cmsms. weil bisjetzt konnte ich immer alles damit realisieren.
wenn alles steht, wird der quelltext in cmsms als template eingefügt und {menu}, {title}, {content} etc an den entsprechenden stellen eingefügt. dann noch das css rüberkopieren, fertig.

pawi · 23. Februar 2011 10:32

Also ich kann dir nur sagen, wie ich es mache, nicht wie "man sollte" smile

1. Layout in Photoshop; Festlegen von Grundsätzlichem, wie feste Breite oder fluid layout, Menüführung, Buttons, Hintergründe, etc. pp
2. Einzelelemente abspeichern im Bildordner, der eigens nur für Basiselemente da ist (nicht für den uploads-Ordner, auf den später jeder CMS-Editor Zugriff hat). Also Buttons, Menühintergrund, feste Headerbilder etc.
3. Integration dieser Dateien ins CSS. Wenn ich bereits ein Template habe, das von der Architektur her meinem Ziel nahe ist, dann muss ich das Rad nicht neu erfinden und ändere das Template + CSS solange ab, bis es so aussieht, wie ich will. Also Hintergrundbild, Headergröße, Schrift, Farben etc. Wenn ich etwas Exotisches will, fange ich bei Null an. Generell empfiehlt es sich jedoch, die (natürlich eigenen) Codeschnipsel, die funktionieren für sich selbst zu archivieren.

Generell arbeite ich nicht mit den Online Editoren sondern copy & paste aus Notepad++, da hier die farbliche Absetzung ungemein hilft, ich Sicherungskopien machen kann und auch mal aus Versehen ein Browserfenster schließen kann smile

Als gestalterischer Tipp allgemein: bei den Layouts die auf den vorgefertigten Templates erstellt werden besteht immer die Gefahr, dass man nicht "outside the box" denken kann und alles wie ein Aufguss der Standardtemplates aussieht. Häufig sieht man z.B. diese Headlines in gelb mit vertikalem Border links, die dann nur umgefärbt werden oder gleich so belassen. Sieht sofort nach lieblos bearbeitetem Standardtemplate aus. Ich würde zuerst Layouten und dann umsetzen, nicht umgekehrt, sonst schleppt man Elemente mit, die völlig unbedacht sind.

Beitrag geändert von pawi (23. Februar 2011 10:33)

piratos · 23. Februar 2011 12:21

Im Prinzip mache ich das so wie nockenfell - das lässt sich auch gut realisieren, wenn man eine Layoutvorlage als Image hat.

Die CSS halte ich inline - habe also im Prinzip am Anfang eine einzige Datei.

Allerdings verwende ich eine Entwicklerebene die aus einer index.php und Smarty besteht, so das ich im Standard einige Dinge an Smarty zugewiesen habe wie z.B. eine Dummy Menüstruktur nebst Dummy Content und Blöcken.

Damit kann ich dann auch gleich wichtige Dinge antesten.

Beitrag geändert von piratos (23. Februar 2011 12:21)

nicmare · 23. Februar 2011 13:08

piratos schrieb:

Die CSS halte ich inline - habe also im Prinzip am Anfang eine einzige Datei.

hier kann ich die codeteilung empfehlen. sowas bieten gute editoren.
links html, rechts css. ne feine sache ist das.

uniqu3 · 23. Februar 2011 13:20

nicmare schrieb:

hier kann ich die codeteilung empfehlen. sowas bieten gute editoren.
links html, rechts css. ne feine sache ist das.
http://img208.imageshack.us/img208/6833/bildschirmfoto20110223u.th.png

Kann ich zustimmen, obwohl ich Dreamweaver besitze bevorzuge ich doch PSPad (unter windows) oder jEdit (unter linux) für solche aufgaben, ist Systemressourcen schonend.
Erwische mich aber immer öfter, im Fall von CMSMS Seiten, beim Templaten direkt im System in Kombination mit EditArea und ScriptDeploy, damit ist auch Syntaxhervorhebung gelöst.

Also um mich der Diskussion anzuschließen gehe ich meisten so vor wie die Mehrheit hier. Design erstellen, slicen, im PSPad oder jEdit Grundlayout (html+css) erstellen, Seite in WAMP Umgebung einrichten, Fertigstellen.
Finde anpassen der Fertigen Templates nicht als gute Idee ausser als lese Referenz für bestimmte tags.

NaN · 23. Februar 2011 13:59

Ich arbeite auch lieber mit einem externen Editor (jEdit wurde ja schon genannt). Für Windows gäbe es noch Notepad++ oder Notepad2, beide recht einfach und ressourcenschonend.
Die Module EditArea und ScriptDeploy habe ich mal ausprobiert. Sind ganz nett, aber einen richtigen Editor können sie nicht ersetzen.

Stylesheets mache ich oftmals auch direkt im Template. Mit Splitscreen kann man ja auch dieselbe Datei einmal oben und einmal unten bearbeiten wink
Müssen also nicht unbedingt separate CSS Dateien sein.
Kann man ja später immer noch teilen.
Seitdem Piratos das Thema Pagespeed hier angesprochen hat, lasse ich die Styles je nach Menge manchmal auch gleich im Template stehen. Ist bei "wenigen" Styles zu empfehlen. Da kann man dann außerdem so hübsch dynamische Sachen mit Smarty einbauen big_smile

Fremde Templates anpassen ist nicht mein Ding. Es sei denn das Template macht tatsächlich genau das was ich will und ich brauche nur Farben und Grafiken zu ändern. Sobald es dann um Maße oder Positionierungen geht, wird's mir oftmals zu viel und ich fange dann lieber von Grund auf neu an.

Ich persönlich bevorzuge auch die Methode, eine einfache statische HTML Seite zu erstellen (völlig losgelöst von CMSms) und wenn das Ergebnis stimmt, dann wird es via Copy & Paste einfach ins System übertragen. Zunächst lokal und dann auf den Server.

Template-Erstellung für CMSms unterscheidet sich im Wesentichen nicht groß von Layout-Erstellung einer jeden HTML Seite allgemein.

piratos · 23. Februar 2011 15:21

Eine der aufwendigsten Knackpunkte sind übrigens die Menütemplates nebst der dazugehörenden CSS.
Das gilt so für ziemlich alle CMS.
Man sollte sich im klaren was für ein Seitenvolumen man haben wird und wie und wo man die Navigation einsetzt bzw. wie sie in etwas aussehen soll und welche Funktionalitäten sie besitzen müssen.

So ein Mini Entwicklersystem (index.php nebst Smarty) im Zusammenhang mit Dummyeinträgen und vor allem eine anständige Sammlung von Menütemplates können da erheblich den Arbeitsaufwand reduzieren.

Ich verwende ebenfalls eine ziemliche Anzahl von Rohtemplates - wobei roh wörtlich zu nehmen ist - die habe ich so gestaltet das Dimensionen über CSS sehr einfach, leicht und vor allem schnell über CSS einzustellen sind.
Hat man einen solchen Fundus ist der Rest eigentlich nur noch Kleinkram.

otter24 · 23. Februar 2011 15:40

Ich benutze fast nur Templates, allerdings meine eigenen. Die kenne ich in und auswending. Je nach Layout 1 2 oder 3 Spalten Header Teaser oder auch nicht.... oder alles in Kombi. und wenn der Designer mal was besonderes will greif ich auch mal auf 960.gs zurück.

Anfangs hab ich auf Yaml zurückgegriffen ( findest Du auch ein Template http://themes.cmsmadesimple.org/Downloa … works.html ) dann noch den Builder.yaml.de und man kann schnell loslegen. Nachteil bei Yaml und Co ist das sie einen ziemlichen Overhead an Code mitbringen, da kann man ordentlich herausschmeißen. Man sollte nur wissen was man tut. ;-)

Gruß aus HH

nockenfell · 23. Februar 2011 16:07

otter24 schrieb:

Anfangs hab ich auf Yaml zurückgegriffen ( findest Du auch ein Template http://themes.cmsmadesimple.org/Downloa … works.html ) dann noch den Builder.yaml.de und man kann schnell loslegen. Nachteil bei Yaml und Co ist das sie einen ziemlichen Overhead an Code mitbringen, da kann man ordentlich herausschmeißen. Man sollte nur wissen was man tut. ;-)

YAML war bei mir der Grund eine eigene Layout-Bibliothek anzulegen. Nach einem YAML Projekt habe ich YAML wieder links liegen gelassen. Das ganze hat eine Struktur welche ich nicht immer ganz durchschauen kann. Somit suchte ich auch schon mal ein wenig länger wo denn nun eine Einstellung vorgenommen, wo überschrieben und wo neudefiniert wird.

Die eigenen Vorlagen kenne ich In- und Auswendig und bin recht schnell mit dem Anpassen. Piratos hatte den entsprechenden Kommentar dazu: Der Rest ist Kinderkram.

piratos · 23. Februar 2011 16:43

nockenfell schrieb:

Piratos hatte den entsprechenden Kommentar dazu: Der Rest ist Kinderkram.

Kleinkram nicht Kinderkram. smile

AlexB · 26. Februar 2011 13:48

Herzlichen Dank, für das schnelle Feedback und die zahlreichen Tipps. Ich bin begeistert über das Forum hier. Dann mache ich mich jetzt mal an die Arbeit meiner ersten CMSms Seite smile

Beitrag geändert von AlexB (26. Februar 2011 14:01)

conceptbay · 28. Februar 2011 09:24

Statt Photoshop für das Layout zu verwenden, würde ich Fireworks empfehlen.
Damit lassen sich viele Dinge leichter editieren und einzelne Seiten besser schon (zur Ansicht) im Vorfeld aufbauen.

Photoshop nehme ich nur noch für die Bildbearbeitung.

Connie · 28. Februar 2011 10:32

Und ich wundere mich sowieso immer, wer alles sich Photoshop gekauft hat ;=)

nockenfell · 28. Februar 2011 11:34

Connie schrieb:

Und ich wundere mich sowieso immer, wer alles sich Photoshop gekauft hat ;=)

Bekenne mich Schuldig.

antibart · 28. Februar 2011 11:42

1. Ich erstelle ein Layout in "was-auch-immer"

2. Zerschneide das Layout in die späteren Div-Elemente und Background-Images

3. Codiere das Template / die CSS erst mal wie in eine statische Website. Mit Blind-Text, Ul-Listen-Menü. Dazu benutze ich einen einfachen Text-Editor. Tatsächlich immer noch Phase 5. Ich codiere jede Seite neu. Dabei ist der HTML-Validator natürlich immer immer aktiv.

4. Speichere das Template unter andem Namen, ersetze die Inhalts-Elemente durch Tags.

5. Füge das Template und die CSS CMCMS hinzu.

6. Bearbeite die Modul-Templates

6. Layoutabweichungen vom Basis-Template werden mittels CGSimpleSmarty ins Template eingefügt, da ich lieber - sofern möglich - mit nur einem varablen Template arbeite.

Beitrag geändert von antibart (28. Februar 2011 11:45)

Forum für CMS/made simple

#1 22. Februar 2011 22:06

[GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#2 23. Februar 2011 01:14

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#3 23. Februar 2011 10:23

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#4 23. Februar 2011 10:29

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#5 23. Februar 2011 10:32

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#6 23. Februar 2011 12:21

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#7 23. Februar 2011 13:08

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#8 23. Februar 2011 13:20

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#9 23. Februar 2011 13:59

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#10 23. Februar 2011 15:21

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#11 23. Februar 2011 15:40

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#12 23. Februar 2011 16:07

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#13 23. Februar 2011 16:43

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#14 26. Februar 2011 13:48

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#15 28. Februar 2011 09:24

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#16 28. Februar 2011 10:32

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#17 28. Februar 2011 11:34

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

#18 28. Februar 2011 11:42

Re: [GELÖST] [GELÖST] [GELÖST] [GELÖST] [GELÖST] [Gelöst] Individuelles Design - Suche nach effektiver Vorgehensweise

Fußzeile des Forums