Aufgrund einiger Nachfragen von Lesern, möchte ich heute erläutern, wie Ihr als Webdesigner einen sauberen Quellcode für eure Seite erstellen könnt. Auf Basis meiner eigenen Erfahrungen möchte ich daher einen kleinen Ablauf erklären.
Zuerst steht die Frage im Raum, für wen die Internetseite programmiert wird. Sofern sie nicht mit einem Passwort geschützt ist, hat jeder Zugriff auf sie. Daher müsst ihr jedem Nutzer die volle Aufmerksamkeit widmen. Legt also als allererstes Sätze wie: “Opera, den benutzt doch niemand” ab. Denn auch wenn Opera von ca. 2 % der Surfer benutzt wird, so sind es bei 10.000 Usern immerhin 200 Leute die unzufrieden von eurer Internetseite gehen. Es hört sich gering an, bedenkt jedoch die Mundpropaganda.
Nach meiner eigenen Erfahrung ist es empfehlenswert bei der Programmierung von Internetseiten mit Firefox anzufangen. Da er zwar nicht der beste Browser im Acid-Test ist, jedoch auch nicht der schlechteste und mit der Web Developer Toolbar ein ideales Plugin besitzt, um seine Webseite auf Fehlerquellen zu durchsuchen.
Wählt euren HTML-Typ und fangt an zu Programmieren. Achtet beim Programmieren darauf das ihr soviel CSS wie möglich benutzt und lagert diese Informationen in eine externe Datei aus.
Verwendet keine Frames. Frames sind mittlerweile veraltet und machen die Programmierung einer Seite nur unnötig kompliziert. Benutzt stattdessen die Dreamweaver-Template-Funktion oder ein CMS.
Es gibt für sauberen Code meines Erachtens nur zwei Herangehensweisen. Entweder ihr programmiert mit Layern und position:absolute, position:relatvie oder ihr benutzt floats. Ich favorisiere mittlerweile die Positionierung durch den CSS Befehl position, da diese Variante direkt das Verdecken von Elementen mit einbezieht und es euch damit möglich ist, den Internetcontent für Suchmaschinen vor den uninteressanten Code zu stellen.
Nachdem ihr eure Seite im Firefox fertig gestellt habt, kontrolliert ihr sie im Internet Explorer 6 auf Fehler. Ab hier solltet ihr Änderungen nur noch im CSS Code vornehmen können. Scheut euch nicht um die Verwendung von CSS Hacks wie dem “* html” Hack für den Internet Explorer.
Sofern IE 6 eine fehlerfreie Darstellung liefert, lenkt eure Augen auf Safari, Opera und die anderen Browsern. Vermutlich werdet ihr zu Opera keine Veränderungen feststellen, da dieser mit einer ähnlichen Genauigkeit wie Firefox arbeitet.
Danach solltet ihr euren Code nocheinmal durch den W3C Validator jagen. Erst wenn hier keine Fehler und Anmerkungen stehen, habt ihr einen sauberen Quellcode.
Mit etwas Übung und einem reichhaltigen Wissen an CSS Codes könnt ihr somit innerhalb einer halben Stunde eine browserkompatible Internetseite programmieren.
Empfehlenswerte Seiten:
Post von Marvin Kerkhoff
Alle Artikel von Marvin Kerkhoff | Homepage/Blog | Marvin auf Twitter folgen, direkt kontaktieren.
Finde Eure Seite sehr gut. Gefällt mir. War eine Empfehlung von Marv.
Allerdings wenn ihr schon so einen artikel reinsetzt sollte er auch auch nach w3c als “gutes Beispiel” bestehen. 32 Fehler! Die sind aber wohl nicht so dramatisch!
Also weiter so lasst Krachen wünsche euch viel viel Erfolg!!!!
Oliver
Ui, da hat uns aber einer Eiskalt erwischt
Ich denke aber das Sebastian im Zuge seiner WordPress-Theme-Optimierung daran arbeiten wird, oder?
Prinzipiell ist die W3C Konformität nicht überzubewerten. Ich versuche beim erstellen des codes auf Konformität zu achten, weil meine Erfahrung mich gelehrt hat, dass ich dann weniger Arbeit bei der Browser-Optimierung habe. Nachdem man dann aber sein Template z.B. in ein CMS integriert hat, renne ich nicht mehr jedem Fehler hinterher
Nananna, Star-Hack (*html) ist ja auch nicht die sauberste Variante
Conditional-Comments sind das Mittel der Wahl:
http://www.quirksmode.org/css/condcom.html
Das Stimmt wohl.
Danke
Ich bin halt doch ein Hacker. Ist halt so wenn ich mir überlege dafür 5 Zeilen Code zu schreiben, da mach ich doch lieber schnell nen Hack. Der funktioniert ja auch.
In erster Linie soll dieser Artikel dazu auffordern für den Entverbraucher eine kompatible Lösung zu liefern. Es ist ein weg nach Rom.
@Prego: Super wärs wenn auch du deine Arbeitsweise kundtun möchtest. Ich würd mich dafür intressieren.
Mag prego da ebenso mal beipflichten (auch wenn mein Markup den W3C-Test ebenso noch nicht besteht
): 5 Zeilen Code heute gespart erzeugen in kurz- bis mittelfristiger Zukunft Reparaturaufwand, der um ein Vielfaches größer ist.
Mit jeder neuen Browserversion werden auch neue Standards in den Markt gepresst. Eine neue CSS-Subversion hier, ein wenig strikteres HTML-Rendering da und futsch ist der niemals dokumentierte Hack.
Conditional Comments sind per definitionem HTML-Kommentare, die von nicht-IE-Browsern schlicht als solche behandelt und nicht interpretiert werden. Tun demnach auch in der Zukunft nicht weh. Außerdem sind sie wesentlich feiner auszusteuern – teilweise sind die Unterschiede zwischen den IE Versionen so groß, dass man mit einer globalen Einblendung á la “* html” nur Probleme an anderer Stelle schafft.
Dazu muß man noch sagen das *html nicht im IE7 läuft. Damit bekommt man nur den IE <6 – und da auch nicht jeden (ich denk da nur an IE5.2@Mac).
Meine Arbeitsweise entspricht im Grunde der die du geschildert hast Marvin. Entwickeln im Firefox 3.x, check ob Firefox 2.x das auch noch alles mitmacht – dann check im IE7, IE6 und ein-zwei mal auch im Opera und im Safari.
Aufem Mac dann halt nochmal Firefox und Safari.
Mittlerweile gehe ich sogar dazu über das alles was kleiner IE6 ist mich an den Zehennägeln lecken kann… aber nun gut, das geht nur bei geschlossenen Benutzergruppen. 20-30% IE6 in-the-wild ist leider nicht zu vernachlässigen. Ich bau halt immer die hover.htc ein, weil ohne *:hover komm ich nicht mehr aus.
Siehe dazu: http://www.triebschicht.de/?postid=23
Und neuerdings den iepngfix für IE6, damit der auch halbwegs mit halbtransparenten PNG’s arbeiten kann, bzw ich mach das Layout dann so das per Conditional Comment eben anderen Hintergrundbilder geladen werden.
Den IE PNG Fix benutz ich auch immer häufiger. Musste letztens aber feststellen das PNGs in Flash hineinzuladen gerade bei großen PNGs (800 x 400) viel performanter ist. Da Flash ja ab Version 6 auf über 95 % der Rechner aktiv läuft kann man das auch schon gut nehmen. Für die anderen 5% gibs halt dann ein normales PNG was die ladezeit natürlich erhöht.
Alles was unter IE 6 liegt lehne ich auch ab. Wer solch einen uralt Browser benutzt ist selber schuld. Im Prinzip gehe ich damit immer so vor: Wenn eine Firma den Support hinter einem Produkt einstellt, werde ich auch nur noch grob für dieses Produkt optimieren. Der IE 5 Mac ist z.B. auch so ein Ding. Der Support ist dort eingestellt, daher optimier ich auch nicht mehr dafür.
Beste Alternative zur Optimierung ist dann dadurch zu Begründen, das durch einen Fehlenden Support z.B. von Microsoft die Sicherheit ihres Produkts nicht mehr gewährleistet ist. Somit kann man das dem “Kunden” auch angemessen verkaufen.
Das mit dem Flash ist eine sehr gute Idee… muss man halt nur schauen wie sich das mit verschiedenen Div’s die ebenenmäßig übereinander liegen funktioniert. Aber da werd ich mal probieren.
Gibts da was fertiges für? So in dieser Richtung hier: http://www.mikeindustries.com/blog/sifr/
Ich benutze fürs einbinden immer http://blog.deconcept.com/swfobject/ meinst du das? Funktioniert einwandfrei.
Nicht ganz: pregos Beispiel rendert dynamisch in speziell markierten DIV-Elementen enthaltene Texte in einen gleich großen Flash-Film. Dadurch wird es möglich, nicht standardkonforme Schriftarten auf Webseiten zu verwenden (die schlicht im Flash dargestellt werden) ohne den Content aus dem Quelltext zu nehmen (und ihn somit für Suchmaschinen unerreichbar zu machen).
Dafür muss nicht jeweils ein eigener Film angelegt werden – die Ersetzung funktioniert dynamisch und ist somit auch z.B. für Ausgaben aus einem CMS geeignet.
Dein Ansatz für Bilder ist da derselbe – vielleicht sollte man das den Entwicklern des o.g. Tools mal stecken…
Also ich würde mir das ganze jedoch nicht so schwer machen. Denn warum Flash einsetzen wenns auch mit GD spitze funktioniert. Gerade bei großen Schriften eigentlich kein Problem.
Das Ding bei den PNGs in Flash ist. Das Flash intern ein PNG in ein JPG umwandelt, komprimiert und trotzdem Halbtransparenzen richtig darstellen kann.
Dynamischen Einladen einer PNG File ist jedoch leider erst seit der Flashplayer Version 8 möglich. Den 8er Player würde ich jedoch noch nicht als BestPractice bezeichen. Der ist noch nicht überall installiert.
Äh – GD arbeitet serverside, Flash clientside.
Schon mal nachgesehen wie viele unterschiedliche GD-libs da draußen unterwegs sind und wie unterschiedliche die mit Fonts, Zeichenabständen, Zeilenhöhen und Transparenzen umgehen? Da brauch es schon einiges an Fingerspitzengefühl, eine Seite so zu verschönern.
Außerdem installierst du o.g. Script ähnlich wie Prototype oder Konsorten: JavaScript includieren, SWF als 1x1px mit inkludierter Schrift exportieren, passend ablegen und fertig.
Es geht hier im Übrigen nicht um irgendwelche fest platzierten Menügrafiken sondern Überschriften, speziell hervorgehobene Textstellen wie z.B. Zitate oder vielleicht ganze Texte einer Website.
Und mit wie GD gerenderten Grafiken hast du immer noch das Problem, dass deine Texte in Bildern enthalten sind. Bei o.g. Lösung sehen Robots Inhalte im Klartext im Code und sogar Browser ohne Flash stellen noch alles korrekt wenn auch mit Fallback-Font dar.
Naja aber ich kann einen Tag ja auch ohne weiteres mit einem Bild verwursteln.
Hab ich eigentlich schoneinmal mein dynamisch generiertes Diagonales Menü in GD präsentiert. Das hab ich mal für die Jugendpflege in Echzell angefangen. Leider hatte ich bisher keine Zeit diese weiterzumachen. http://www.jugendpflege-echzell.de/index.php