ComputerBase Menü
Aktuelles

CSS Webdesign mittels CSS - Führen mehere Wege zum Ziel?

J

Jack159

Lieutenant
Registriert
Dez. 2011
Beiträge
766
Hallo,

Ich arbeite mich derzeit in HTML und CSS ein und versuche mich nun daran erste Designs nachzubauen.
Dabei kam mir schnell die Frage auf, ob es für verschiedene Designs auch verschiedene Lösungswege gibt bzw. ob es auch No-Go's im Webdesign gibt?

Beispielsweise fallen mir für den Header von Golem.de mehrere Wege ein, wie ich diesen umsetzen könnte bzw versuchen würde umzusetzen :D

Gibts da irgendwelche etablierten Lösungsansätze wo man sagt "Für diese Art von Header nimmt man z.B. Float und für dieses eher absolutes positioning"? Oder ist das wirklich komplett egal und alles akzeptiert und man frickelt solang rum bis es steht, hauptsache das Design stimmt am Ende?
 
Woran du dich immer halten musst:
1.) Schreib semantisch korrektes (idealerweise perfektes) HTML5. Das heißt: Verwende nach Möglichkeit keine Hilfscontainer.
2.) Löse in CSS, was in CSS zu lösen geht. Erst dann kommt JavaScript
3.) Spare Bandbreite, und noch wichtiger, spare Requests. Eine große Datei ist signifikant besser als 10 kleine.
4.) Halt den Kram einfach, sonst verstehst du in nem Jahr nicht mal mehr die Hälfte davon.

Schon aus Punkt 1 ergibt sich, wie du es machen solltest. Alles was gemäß Punkt 1 ordentlich aussieht passt am Ende auch.
 
Ob du jetzt ein Element floatest oder positionierst ist im Grunde genommen egal. Meistens führt kein Weg an einer Positionierung vorbei und man erspart sich damit unnötige Spielereien in anderen Browsern. Man sollte es damit aber nicht allzu sehr übertreiben (alles mit position zu versehen...), da es hier und da evtl. zu Performanceeinbrüchen kommen kann (speziell auf Mobile Devices).

Um Daaron's 1. Punkt aufzugreifen: Ordne den HTML Code / Content wenn möglich so an, dass man ihn auch ohne CSS "gut" lesen kann (Stichwort SEO, Barrierefreiheit, Screenreader). Es bringt bspw. nichts, wenn die Hauptnavigation nur am Ende des <body>-Tags positioniert wird.
 
Hm, das kann man sehen wie man will. Denk mal an ein klassisches dreispaltiges Layout, bei dem in der linken Spalte die Navi liegt, in der Mitte der Content und rechts weniger relevante Zusatzinformationen.
Geht ja man hier nach der einfachen Float-Variante vor, so sortiert man den Code Links -> Rechts -> Mitte, um dann per float:left/right und margin:left/right den Kram zu positionieren. Sieht gut aus, funktioniert auch, aber SEO-technisch ein Graus (obwohl jetzt die Navi über dem Content steht). Man hat plötzlich den Beifang-Content der rechten Spalte vor dem Main-Content aus der Mitte. Genau hier setzt z.B. Holy Grail an: Du schreibst Mitte -> Links -> Rechts (also Content zuerst, Navi später).

Aber ein Glück... für sowas braucht man (vorausgesetzt man ignoriert Holzklasse-Browser) heute weder Float noch gruselige absolute Positionierung. Dafür gibts Flex.
 
Die guten Holzklasse-Browser Daaron, hachja, die Zeiten sind hoffentlich bald vorbei :-P

Denk dran immer schön mit Kommentaren zu arbeiten. Das Problem ist nicht, dass Du dich morgen nicht mehr durch den Code findest, sondern was passiert, wenn der Kunde (vorausgesetzt du hast irgendwann mal welche) in einem Jahr irgendwann mal Änderungen haben möchte. Natürlich verstehst du dann, was du da geschrieben hast, aber Kommentare erleichtern einem das Leben ungemein ;-)!!!!
 
Du kommentierst CSS und HTML? Das ist Bandbreitenverschwendung, also etwas, das man dem Endverbraucher nicht antut. Statt dessen verwendet man sogar Code-Minimierer wie YUI, um alles möglichst kompakt auszuliefern. Da spart man gern mal 20-30%.
 
Naja, wieso sollte man den Code nicht für interne Zwecke kommentieren. Spätestens beim Minify wird das Zeug eh wieder entfernt.
 
@Daaron

könntest du bitte punkt 1 erkleutern, was meinst du mit hilfscontainer?

thx
 
Er meint damit, dass
HTML: 
<header>
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>
</header>
besser ist, als
HTML: 
<header>
    <div id="nav-wrapper">
        <nav>
            <div id="nav-inner">
                <ul>
                    <li></li>
                </ul>
            </div>
        </nav>
    </div>
</header>
Die beiden <div>-Container haben grundsätzlich keine Bedeutung. Manchmal werden diese aber benötigt, um Designs abbilden zu können. Semantisch ist das zwar nicht mehr ganz korrekt, aber hier sind eben, je nach Design, Abstriche zu machen.
 
Zuletzt bearbeitet:
aso ... ja klar... ich dacht jetzt kommt wida was kurioses... ;)

mercy
 
Wieso kurios? Es gibt viele Praktiken, die halt so gemacht werden "weil es viele so machen" oder "weil ich das da und da so gesehen hab"... die aber semantischer Dünnschiss sind. Ich erinnere nur an <div class="clearfix></div>...
 
Hey,

ich persönlich kann dir nur sagen, dass es nie zu früh ist, sich in professionelle Präprozessoren oder Grid-Systeme einzulesen.

Bootstrap gehört heutzutage z.B. zum Quasi-Standard; es vereinfacht vieles unheimlich und man trifft es zu guter Recht extrem oft an. Außerdem würde ich mir aber auch mal HAML, SCSS/SASS und [url="http://compass-style.org/]Compass[/url] ansehen. Wenn du über die CSS-Grundlagen hinaus bist, erreichst mit diesen Tools einfach einen unglaublichen Mehrwert.

lG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz