wie setzt ihr eure designs um?

    in anlehnung an diesen thread hier: https://www.forum-hilfe.de/threads/50332-…Fehler?p=383714

    hab ich mir gedacht, die diskussion mal auszulagern.
    wenn das thema hier interessant genug wird könnte man es zu nem sticky werden lassen.

    also holt ma eure vorgehensweise raus :)

    ich würd vorab nur gern die vergangene diskussion aufgreifen

    Zitat von threadi

    Ich schaue erst nach was das vorliegende Design inhaltlich erfordert und definiere die dafür nötigen Elemente. Da sind noch keine <div>'s und <span>'s dabei. Erst wenn ich die CSS-Datei einbinde und beginne das eigentliche Design aufzubauen, füge ich hier und da ein <div> ein. Z.B. für einen Kopfbereich der mehrere Elemente enthält. Aber dafür gibt es in HTML5 endlich auch <header> (hab ich bisher nur zu testzwecken genutzt, finde ich aber äußert sympatisch). Eine <div>-Suppe wie man sie so oft findet (das Forum ist btw. auch eine) versuche (!) ich ständig zu vermeiden.

    also so wie du es schreibst bauste die website inside-out.
    ich definiere zuerst alle rahmenbedingungen und baue mir ein grundgerüst, bevor ich schaue, welche elemente benötigt werden um den inhalt darzustellen!
    wurde bisher auch in jeder agentur in der ich war so praktiziert. man baut dort die website von hinten nach vorne und aussen nach innen.

    also teilt man sich das design in schichten und rahmen auf - quasi wie auch künstler ein bild malen würden (erst hintergrund und rahmenbedingungen und dann kommen die inhalte (personen oder andere objekte)

    threadi, werläutere mal bitte deine vorgehensweise genauer.

    kommt immer drauf an. bei etwas größeren designs zeichne ich oft erstmal ne grobstruktur
    in photoshop oder manchmal sogar paint. einfach um ne grobe richtlinie zu haben.

    und dann wird gebaut, erstmal die rahmencontainer, dann die anortnung von navi und content
    usw. je nachdem wie die idee im kopf dazu aussieht.

    Design anschauen, sinnvolle Aufteilung überlegen mit der Funktion des ganzen im Hintergrund --> Bereiche bestimmen

    Dann jenachdem,

    statische Seite: nacheinander Bereiche mit den Inhalten anlegen, größen & positionierung in etwa schonmal anlegen (Strukturelle Dinge eben, wie floats, die margins auf Augenmaaß).
    Sobald alle Bereiche mit den Inhalten und schon mit den Farben & Grafiken ausgestattet sind, messe ich nochmals die Abstände nach und setz alles nochmal um paar Pixel um, pass die schieb etwas an den Hintergründen etc.
    Z.B. Style ich meine Listen erst wenn die Bereiche richtig sitzen.

    Templates: die einzelnen Bereiche in die gewünschte Struktur anbringen, genaue Paddings & Margins innerhalb des Bereichs. Hier mach ich wie im letzten Beispiel bereits die Listenstyles. Am Ende die zusammenführung im Haupttemplate.

    Also so ziemlich die selbe Methode die synaptic & driver bereits beschrieben haben.

    Oh, gerade erst das Topic hier entdeckt. :)

    Von außen nach innen trifft denke ich bei mir auch, hoffentlich meinen wir das selbe. Mache es ähnlich wie Grevas, nur eben dass ich nicht das Design an sich erstelle. Ich kodiere lediglich mit gelieferte Designs. Und das geht meist (!) so:
    Grafischen Entwurf anschauen.
    Bereiche im grafischen Entwurf für die einzelnen Inhalte bestimmen (also was ist ein Menü, was ist Content, was ist Footer, was Header ..).
    Wichtige Elemente der Grafik aus dem grafischen Entwurf ausschneiden (z.B. Rundungen, Buttons (ohne Beschriftung), Icons etc.).
    HTML-Datei mit HTML-Grundgerüst erstellen (ohne Inhalte im <body>).
    Innerhalb vom <body> nacheinander die vorher bestimmten Inhalte eintragen, zunächst ohne jegliche Formatierung, lediglich die Reihenfolge beachte ich schonmal.
    Ergebnis an der Stelle ist meist eine pure HTML-Datei ohne irgendwas anderes, ohne <div>, ohne <span>, aber mit allen HTML-Elementen mit semantischer Bedeutung.
    CSS-Datei für Screen-Ansicht erstellen (mit Rückstellung aller wichtigen Eigenschaften wie margin, padding etc. auf 0 bzw. auto oder none).
    Ergänzung von Klassen und ggfs. auch IDs um einzelne Inhaltsbereiche direkt per CSS anzusprechen (z.B. für ein <ul>-Menü die ID "menu", für footer die ID "footer" etc.).
    Ergänzung von CSS-Eigenschaften für die eben geschaffenen HTML-Ergänzungen um das Grunddesign zu erreichen.
    Ergänzung von Hilfselementen zur besseren Ausrichtung einzelner Inhalte um das gewünschte Design zu erreichen (hier kommen dann erst <div>'s ins Spiel! Aber nur möglichst wenige!).
    Ergänzung von CSS-Eigenschaften für die Feinabstimmung von Ausrichtungen und Abständen im Grunddesign.
    Feinarbeiten am Design, sprich: Schriftarten, Abstände, Breiten, floatings etc.pp.

    Ergebnis ist dann eine HTML- und eine CSS-Datei für die Screendarstellung. Dann folgt noch ein Browsertest mit ggfs. darauf folgenden notwendigen Anpassungen für andere dem Kunden zugesicherten Browsern.

    Das Vorgehen ist fast immer das Selbe. Das Ergebnis wird dann als Grundlage für weitere HTML-Kodierungen für z.B. Formulare, Artikellisten oder ähnliches genutzt. Die Druckansicht folgt als allerletztes.

    Und das wird dann in das jeweils gewünschte CMS eingefügt und erst dann werden auch Inhalte dynamisiert, also durch Platzhalter/Variablen ersetzt, so dass der Kunde dann selbst diese ändern kann.

    Dieses Vorgehen habe ich von vielen anderen Entwicklern über Jahre hinweg gelernt, abgeguckt und optimiert und momentan bin ich damit sehr zufrieden. :) Ich kam seit Jahren nicht mehr in die Verlegenheit eine <div>-Suppe zu generieren, Frames habe ich seit dem letzten Jahrtausend nicht mehr verwendet.

    Threadi, ich würde gerne mal so ne file ohne Divs von dir sehen :) nich dass ich nich wüsste, wie so ein source aussehen würde..

    aber du sagst du machst es ähnlich wie grevas, doch der macht direkt am anfang seine bereiche klar...

    und sorry fürs verspätete editieren, das funkloch in kombi mit anitas flach-apfel (ipad) wollte mich nich anständig posten lassen und daheim angekommen hab ich den pc nich mehr an gemacht

    3 Mal editiert, zuletzt von synaptic (18. Februar 2011 um 08:34)

    Zitat von threadi


    Mir liegen Designs meist als PSD oder AI vor. Da sind auch schon Beispielinhalte für Überschriften, Absätze, Menüpunkte etc. drinne. Wenn nicht forder ich das als erste Inhalte noch an.


    Das empfinde ich als falsch herum, man möchte irgendwelche Sachen auf seiner Website präsentieren und noch ein paar Features zur Navigation bereitstellen, und das Design soll sich dann raussuchen, was wohin soll, aber darüber mach ich mir erst später Gedanken.

    Zitat von threadi

    Dadurch kann man an einem reinen Designentwurf durchaus erkennen, welche Inhalte wo stehen und wie ausgezeichnet sein müssten.


    Das hat dann aber nichts mehr mit Semantik zu tun, dieses wo-stehen und wie-ausgezeichnet, das sich aus dem Design ergibt, ist keine semantische Notwendigkeit und bei anderen Designs anders.

    Zitat von threadi

    Das hat alles noch rein gar nichts mit irgendwelchen Servereinstellungen oder Funktionen zu tun. Es geht rein um die HTML-Kodierung und CSS-Definition. Nicht um Effekte mittels JavaScript oder dynamische Funktionen mit php. Die kommen erst viel später, wenn es um die eigentliche Integration des fertigen HTML-Codes in eine Webseite geht.


    Bei serverseitigen Sachen bzw. JavaScript ging es mir um die Einbindung verschiedener Inhalte an verschiedenen Stellen, nicht um Effekte oder interaktive Sachen. Nur das erlaubt im Allgemeinen, von dem div-Gewusel zu abstrahieren. Was glaubst du, weshalb es Template-Engines gibt? Wenn du soetwas serverseitig machst, kannst du eben die Sachen an ganz verschiedenen Stellen einbinden und manche Sachen vllt. auch nicht einbinden, mit JS kannst du komplexere Positionierungen gestalten, die unabhängig sind von der Positionierung (z.B. der div soll 50% der Breite von dem div haben).

    synaptic:
    Gerne doch. Hier z.B. der Quellcode-Entwurf für eine Seite die noch nicht online ist, ist erst vor kurzem entworfen wurden:

    The User:
    Ich glaube wir unterscheiden uns im Gedanken wo der HTML-Code nun eingesetzt und wie er bearbeitet wird wird. Du denkst scheinbar in bestimmten Schienen die dir ein CMS / Template-Engine vorgibt. Ich erstellte auch oft Seiten ohne irgendein fertiges CMS und auch nicht für eine Template-Engine. Dadurch bin ich (wie ich finde) etwas freier was die Gestaltung des HTML-Codes angeht. Wenn es dann darum geht diesen Code in ein CMS einzufügen, welches bestimmte Voraussetzungen stellt, dann sieht mein Quellcode durchaus auch mal etwas anders aus, je nachdem was das Zielsystem ist. Wichtig ist mir dabei nur, dass keine <div>-Suppe entsteht, das die wichtigen Inhalte auch als solche ausgezeichnet werden. Das kann leider nicht jedes CMS / Template-Engine leisten (kannst mir auch gerne noch eine zeigen die es deiner Meinung nach kann, ich lerne gerne immer wieder dazu :) ). Bisher ist mir sowas nur bei typo3 und VIO.Matrix geglückt, wo man die Ausgabe der Inhalte wirklich 100%ig anpassen kann.

    Zitat

    [..]man möchte irgendwelche Sachen auf seiner Website präsentieren und noch ein paar Features zur Navigation bereitstellen, und das Design soll sich dann raussuchen, was wohin soll, aber darüber mach ich mir erst später Gedanken.

    Dein Design denkt mit? So verstehe ich das jetzt. Wenn man eine Webseite erstellt die jemand ohne HTML-Kenntnisse inhaltlich füllen soll, muss man ihm doch ein Gerüst vorgeben in dem er arbeiten kann. Natürlich kann er dann auch mal einiges hin- und her schieben. Aber er kann nicht das gesamte Design umstellen. So ein dynamisches Design kann man imho nicht wirklich erstellen.

    Zitat

    Das hat dann aber nichts mehr mit Semantik zu tun, dieses wo-stehen und wie-ausgezeichnet, das sich aus dem Design ergibt, ist keine semantische Notwendigkeit und bei anderen Designs anders.

    Semantik ist die Auszeichnung von Inhalten nach ihrer Bedeutung. Daher ist es in meinen Augen durchaus relevant, wenn man das Design betrachtet um es auseinander zunehmen. Ein Menü muss als Menü ausgezeichnet werden, eine Betonung als Betonung, eine Überschrift als Überschrift etc.pp. Sowas erkennt man an grafischen Entwürfen und sollte diese Erkenntnisse dann auch umsetzen. Notwendig ist es natürlich nicht, kann ja jeder machen wie er will ;)

    Zitat von The User

    Ja und was ist p="rechts"? Das ist eindeutig Design-Struktur im HTML, das gehört da nicht hin…


    Das erinnert mich an etwas.
    In ein 'paar' Jahren, wenn alle Browser die eingesetzt werden die neuen Pseudoklassen können, wird sich bestimmt irgendwo jemand finden, der keine CSS Klassen verwendet, sondern alles mit :nth-child etc. umsetzt. Darauf freu ich mich schon.:megalacher:
    Wenn sich keiner findet, mach ich's selber just 4 fun :pfeif:

    joa ich hab beim threadi auch nen div gefunden, was ja noch gar nich drin sein soll.
    aber ich muss gestehen, dass mir diese vorgehensweise arg unprofessionell ist (und nein threadi, das war jetzt kein schuss gegen deinen bug, sondern miene meinung)
    mir ist das zurechtfinden in einem solchen wirrwarr für die füße.
    hätte ich die neue navigation für ein großes versandhaus auf diese art und weise gemacht, wär ich später weder mit den divs noch mit der stylevergabe klargekommen.
    ich frag mich was das für entwickler waren, die dir den scheiss beigebracht haben^^
    ich brauch doch nen bereich, in dem ich die elemente platziere und hab so einen eineindetigen einsprungpunkt fürs css!
    man braucht ja des öfteren mal wrapper und ein div.navi .wrapper ist ja was anderes als ein div.contentLeft .wrapper, obwohl beide ähnliche styles haben können.
    aber da schweife ich grad etwas ab.

    fazit für mich ist auf jeden fall, dass ich nicht irgendwelche inhalte mache, wenn ich keine container hab. Das wär ja wie figuren in einen setzkasten packen, obwohl man nur die rückwand als brett hat.
    ich hoff ihr kennt setzkästen... wenn nich hier mal nen bild..: http://einestages.spiegel.de/hund-images/20…_borderless.jpg

    The User
    Kennst Du z.B. einen RichTextEditor wie den RTE in typo3? Dort kannst Du festlegen, dass der Redakteur einen Absatz schreiben und diesem einen bestimmten Style zuweisen kann. Diese Style-Zuweisung geschieht dann über eine Klasse in dem Absatz-Tag. Oder meinst Du dafür wäre noch ein unnötiges <div> notwendig? Geht natürlich auch, wäre aber eher unsauber als die von mir gezeigte Variante.

    Heißt: man kann einen HTML-Code schon so vorbereiten, dass er von einem Texteditor durch den Redakteur so gepflegt werden kann, dass der Redakteur beim Stylen und herum schieben kein Wirrwarr erzeugt und trotzdem eine Designsicherheit gegeben ist.

    synaptic:
    Verstehe was Du meinst. Bedenke aber, dass mein Beispiel oben von einer winzigkleinen Seite nahezu ohne Designelemente war. Bei einer größeren Seite wie einem Shop sähe das natürlich auch wieder anders aus. Da verwende auch ich <div>'s - ich verteufel sie ja nicht, ich verwende sie auch. Aber eben nur für notwendige Stellen. Ein <div> wäre z.B. als Umgebung für das Menü in meinem Beispiel völlig unnötig. Und sowas

    Code
    <div id="content">
<div id="text">
<div class="format1"><h1>Text</h1></div>
<div class="format2"><p>Text</p></div>
</div>
</div>

    ist imho auch unsauber (ich sage nicht falsch, da es ja auch so rein visuell funktioniert!).

    Das Setzkastenbeispiel ist schön, damit habe ich früher auch mal die Grundlagen gelernt, als man noch nur frames nutzte ;) Heute verwende ich das Prinzip durchaus auch, wenn es das Design erfordert.

    Btw. "unprofessionel" wäre imho nur jemand der für eine kommerzielle Webseite framesets als Grundlage verwendet. Worüber wir hier reden ist alles professionell - so wie auch Du deine HTML-Codes (die ich btw. noch nicht gesehen habe ;) ) aus deiner Sicht optimal umsetzt.

    Fazit für mich (bis jetzt): es gibt verdammt viele Herangehensweisen an HTML-Kodierung. Jeder hat für sich die optimale scheinbar gefunden und man sollte respektieren, dass andere es durchaus auch anders machen, solange diese nicht auf veraltete Techniken wie frames setzen ;)

    also nen etwas älteren code von mir findeste bei http://taxi-lindl.de (läuft sehr viel über includes)

    neue codes sind derzeit keine online, aber ich schick dir ne pm, wenn das große versandhaus mit seinen mandanten in AT,NL, PL, RU online geht, dann kannste dir gerne ansehen wie ich dort navigation (breadcrumb, leftnavi, topnavi), filter und die artikel-detailseite umgesetzt hab :)

    Au. Wenn das dein Gegenbeispiel sein soll, bekommt hier threadi eindeutig den Punkt ;) (ja, auch wenn man die Einrückung ignoriert) - das ganze sieht im Quelltext für mich wie der Anfang einer Divsuppe aus, solang es dabei bleibt ist es noch OK, aber gib es nicht als Referenz für ein semantisches / sauberes HTML Gerüst her *g*.

    In dem Fall hätte ich z.B. wie threadi beschrieben hat kein Div für die Navigation gemacht. Ist zum Glück vieles noch Geschmackssache und wir bewegen uns hier schon ganz schön im Detail - ich bezweifle, dass man sich dann noch auf etwas einige könnte ;) .

    der quelltext ist sauber, valide, in den original files anständig eingerückt, da hat alles seine semantische richtigkeit und das mit der navi ist tatsächlich geschmackssache...
    ob man da jetzt das ul als natives block-element sieht oder ob man nen div drum herum macht is dabei völlig wurst.

    wo du da den anfang einer div-suppe siehst kann ich nicht nachvollziehen, wie realisierst du denn zum beispiel content-rahmen die grafisch umgesetzt werden, abgerundete ecken haben und in der höhe dynamisch bleiben müssen?

    HTML
    <div id="wrapper">
  <div id="header">
    <div id="claim"></div>
    <div id="adtel">
      <div id="address">

    Ich meine sowas hier ;) , für den Claim hätte es auch ein img getan - wobei der Teil sogar noch im Background des headers hätte rein können
    Für die Texte werden auch einfach nur Div's gemacht -> nur div's -> div-suppe ;) - noch nicht zu tief verschachtelt, deshalb erst der Anfang.

    /P.S. natürlich ist das auch Valide, das will ich gar nicht bestreiten, nur eben nicht die beste Referenz die du bieten kannst.

    Ich positionier auch viele Elemente per Div an die gewünschten Plätze.
    Der Vorteil bei zb Claim ist eindeutig, falls er die Schrift nicht mehr per Bild einbinden möchte kann er dies leicht Bewerkstelligen. Einfach Bild aus CSS raus und Text in die Div hinein


    mfg

    bilder sind aber grundlegend nich seo-relevant auch net mit alt-texten, denn die sind für barrierefreiheit gedacht.
    und sind zwar nur knapp über 27k und knapp 19k einträge, aber:
    suchwort:
    taxi-lindl => http://www.google.de/search?q=taxi-…lient=firefox-a

    suchwort:
    taxi kelheim => http://www.google.de/search?q=taxi-…909b673fdd434b9

    ich find da gibts nichts zu meckern :mrgreen:

    aber wenn du eine solch geringe schachtelung als beginn einer div-suppe siehst, isses eben dein persönliches empfinden
    ich mein ich hab diese referenz genommen und meinen aktuellen job bekommen. verdiene hier auch recht moderat, wie du weisst- also kann es nich soo falsch gewesen sein und die referenz war offensichtlich auch gut genug.

    prinzipiell finde ich es nicht verwerflich container für die positionierung von elementen zu nutzen.
    die übersicht ist hier gut vorhanden, die seite wurde extra so gemacht, dass jemand mit wenig erfahrung in sachen html da auch problemlos änderungen durchführen kann, sofern nötig und ich keine zeit dafür finde

    Für die Erstellung von Internetseiten baue ich am liebsten übergordnete Menüs aus divs und/oder Tabellen und lade die entsprechenden Inhalte/Verlinkungen/Bilder hinein. Generell entscheide ich meist zwischen entweder blockhaften Strukturen, manchmal ganz ohne Grafiken oder auf Grafiken basierenden Seiten. Letztere ist nicht für schnelle Veränderungen gedacht aber man kann damit wunderbar rumspielen. CSS nutze ich gerne aber eher nur für Farbgebungen, Schriftformatierung, etc., kaum für tatsächliche Inhalte. Vielleicht ändert sich das beim nächsten Mal, da die letzte rundum neu geschriebene Seite schon wieder über ein Jahr her ist.

    Grob Struktur schaffen und dann verfeinern ist schon eine gängige Sache würde ich mal sagen.
    Das dann alles zum schluss wirklich so hinzuschieben das es gefällt ist dann mit einer verbesserung hier und da mal vollkommen ok.

    Ich habe zb für ein Projekt das ich angefangen habe im späteren Verlauf dann noch angefangen alles mögliche zu benennen um noch mehr flexibilität zu schaffen. Ob da je jemand durchsteigt ist mal was ganz anderes und ob das auch angenommen wird...
    Hier mal was zum schauen: http://www.thilda.lima-city.de/sn/

    Ist jetzt nicht der totale hammer aber ein wenig stolz bin ich auf das ganze gehirngeficke das ich damit hatte schon. Und wie gesagt... nur ein Bsp!!!