. segert.net weblog . » Wie werde ich Webdesigner im Sinne der Webstandards?

Über das segert.net weblog

Das segert.net weblog schrieb ich zwischen Oktober 2003 und Dezember 2007 mehr oder weniger intensiv. Weiter mit dem Blogging geht es auf Ratatatam und bald auch wieder auf unserer Agentursite segert.net.

ralphs

Wie werde ich Webdesigner im Sinne der Webstandards?

4. September 2006 um 12:00

Nehme ich das Verhältnis von Websites, die in unübersichtlichen Tabellenkonstrukten stecken und denjenigen, die nach den Webstandards erstellt sind, so sehe ich ein Missverhältnis zugunsten der alten Technik. Ein Grund der eher schleppenden Akzeptanz der Webstandards hierzulande sind wohl die höheren Anforderungen an die Webdesigner. Ein HTML-Tabellenlayout kann recht schnell erlernt und erstellt werden. Nicht zuletzt deswegen gab es 1996 einen sprunghaften Anstieg von Webdesign-Anbietern quer durch viele Branchen. Auch wenn sich mittlerweile mehr oder weniger die Spreu vom Weizen getrennt hat, von einem Durchmarsch der Webstandards und damit auch des CSS-Designs kann keine Rede sein. Wer es aber als Freiberufler oder engagierter Freizeitschrauber versuchen will, dem seien folgende Anforderungen ans Herz gelegt:

Gesteigerte Lernbereitschaft

Der Umstieg auf CSS-Design im Sinne der Webstandards erfordert Wissensdurst und die Kenntnisse neuer Begriffe wie Box Model, Floating, Vererbung, Markup und weitere. Es stellen sich Fragen wie: Warum wurde CSS entwickelt? Wie funktioniert CSS? Welche Rolle spielt die Doc-Type-Deklaration. Was hat CSS mit (X)HTML zu tun? Warum bedeutet die Einhaltung von Webstandards nicht gleich barrierefreies Webdesign? Generell gilt: Man lernt auch im Hinblick auf die Webstandards nie aus.

Umdenken beim Erstellungsprozess einer Website

Jens Grochtdreis hat in seinem Artikel Webseiten sind keine Gemälde folgendes auf den Punkt gebracht: Zugängliche Webseiten sind in erster Linie Textseiten, die unabhängig von Design und Layout in allen Geräten funktionieren sollten. Mit Projektbeginn wird eine Webseite zuerst als strukturiert ausgezeichneter Text mit (X)HTML-Anweisungen erstellt. Diese Anweisungen sagen dem Browser, was eine Überschrift, ein Absatz, eine Liste, ein Formular, eine Tabelle ist. Danach gestalte man die Seite mit Hilfe von CSS-Befehlen, die in einer seperaten Datei liegen und alle vorhandenen (X)HTML-Seiten eines Webprojekts mit Gestaltungsanweisungen versorgen. Fällt diese CSS-Datei weg, weil ein Gerät oder veralteter Browser sie nicht lesen kann, bleibt die Seite trotzdem les- und navigierbar, garantiert durch ein semantisch korrektes Markup. Für den CSS-Designer bedeutet das einerseits, die strengen Regeln von (X)HTML und Markup zu kennen und zu akzeptieren und andererseits die umfangreichen Gestaltungsmöglichkeiten von CSS zu entdecken und kreativ einzusetzen. So beginnen Sie zugleich, sich von Arbeitsroutinen wie Font-Tag im HTML-Dokument, blinde Gifs, verschachtelte Tabellen, Schmuckgrafiken im Markup usw. zu trennen.

Erhöhte Frustrationstoleranz und Hartnäckigkeit

So zahlreich und erfreulich die gesteigerten Layoutmöglichkeiten durch CSS auch sind, spätestens die erste negative Erfahrung beim Testen im Internet Explorer erhöht die Frustration und erfordert Hartnäckigkeit bei der Suche nach Lösungen und Alternativen. Generell sollte immer mehr Zeit für das CSS-Coding eingeplant werden, auch für Web-Recherchen nach Lösungen und Erfahrungen anderer Webdesigner.

Langer Atem und Entscheidungsfreude

Auch wenn man bereits ein korrektes Markup vorliegen hat, ist CSS-Coding vor allem am Anfang ein Spiel mit Versuch und Irrtum. Und auch wenn es keine Lösung für den eigenen Layout-Ansatz in allen modernen Browsern zu geben scheint, die Bereitschaft umzudenken und umzuschreiben, die Erwägung, IE-Hacks einzusetzen sowie generell die Suche nach neuen Lösungen wird meistens belohnt mit relativ korrekt dargestellten Layouts in allen modernen Browsern. Dabei dürfte so mancher Fluch über den Schreibtisch gehen, aber das Gefühl nach erfolgreichem Abschluss ist dafür umso schöner. Sie lesen wohl spätestens jetzt heraus, dass es darauf ankommt, sich auf einen langjährigen Erfahrungsprozess einzulassen, der den berühmten langen Atem voraussetzt. ;-)

Erweiterung der Test- und Arbeitsumgebung

CSS-Designer - oder wie immer man sie auch nennen will - brauchen eine erweiterte Testumgebung. Die Arbeit muss unter Windows-XP und Mac OS X und in allen modernen und populären Browsern getestet werden können. Eine Linux-Testumgebung wäre auch nicht verkehrt. Auch die Auseinandersetzung mit geeigneter Software wie Editoren, Validatoren, Browser-Erweiterungen und andere ist gefragt. Hilfreich ist zudem der Aufbau einer speziellen Linksammlung und strukturierte Notizen als Gedächtnisstützen, die schnell abrufbar wären.

Einschätzung der eigenen Fähigkeit

Wer das CSS-Design so beherrscht, dass er in akzeptabler Zeit webstandardkonforme Websites abliefern kann, ist einen wesentlichen Schritt weiter und kann stolz auf sich sein. Der Stolz sollte aber nicht soweit gehen, dass man seine Fähigkeiten überschätzt, indem man mit barrierefreiem Webdesign wirbt. Ralph G. Schulz hat in dem Artikel Webstandards versus Barrierefreiheit die Unterschiede herausgearbeitet. In der Regel gilt, dass man für komplexe Sites, die den Anforderungen der Barrierefreiheit im Sinne der BITV (Barrierefreie Informationstechnik-Verordnung) entsprechen sollen, erfahrene Spezialisten braucht. Was nicht heißt, dass sie keiner werden könnten. Aber bleiben Sie ehrlich gegenüber dem Kunden. Ihm bieten Sie bereits mit Einhaltung der Webstandards die Grundlagen für die Barrierefreiheit, zugänglichere Websites, schlankeren Code, einfachere Website-Pflege, schnellere Redesigns sowie Webdesign-Technik auf einem innovativen und zukunftsfreundlichen Stand. Freuen Sie sich darüber! Und was Ihre neuen Argumente gegenüber dem Kunden angeht, so sind der Weblogbeitrag Webstandards für Entscheider von Oliver Schwarz und die Übersetzung Die Vorteile von Web-Standards für Ihre Besucher, Ihre Kunden und Sie selbst! von Stefan Walter sicher hilfreich.

Empfehlungen für den Einstieg in die Webstandards

Wenn Sie bereit sind, einen erfolgreichen und geduldigen Einstieg ins CSS-Design und die Webstandards zu wagen, beachten Sie folgende Empfehlungen.

  • Besorgen Sie sich Fachbücher über die allgemeine Funktionsweise von CSS und Einsteigerliteratur in die CSS-Praxis
  • Lesen Sie in Mailinglisten und Foren und stellen Sie dort Fragen. Achten Sie darauf, dass sie nicht in einer Diskussiongruppe für Profis landen. Lesen Sie vor dem ersten Eintrag die FAQ (zum Beispiel die der Liste CSS-Design) und stöbern sie im Archiv.
  • Testen Sie CSS-Editoren wie Top-Style für Win und skEdit für Mac
  • Lesen Sie Fachblogs und abonnieren Sie die RSS-Feeds
  • Bauen Sie sich eine strukturierte Linksammlung auf
  • Beginnen Sie mit einfachen Übungs-Layouts
  • Setzen Sie die im obigen Text kursiv gesetzten Wörter als Suchbegriffe in einer Suchmaschine ihrer Wahl ein
  • Stellen Sie Ihre erste wichtige Arbeit zur Diskussion
  • Betrachten Sie Kritik als Hilfe
  • Sammeln Sie kontinuierlich Information über Grundlagen sowie Tipps und Tricks der Profis und strukturieren sie diese zu einem internen oder öffentlichen Infopool.

Damit ich nun heute noch dringende CSS-Arbeit erledigen kann, deren Zeitaufwand auch nach gut 3 Jahren CSS-Erfahrung nicht genau abschätzbar ist, höre ich hier auf und bitte meine Leser, in den Kommentaren ihre wichtigsten Bücher (auch solche für die leicht fortgeschrittenen Webstandards-Freunde) sowie ihre besten Links zu Artikeln, Weblogs und Ressourcen für Ein- und Umsteiger loszuwerden. Sie werden es Euch danken :-)

Update: Links für Einsteiger mit HTML-Vorkenntnissen

Da die Links für Einsteiger in den Kommentaren spärlich bleiben, folgende wertvolle Sites.

Zur Startseite | Zur Suche .

23 Kommentare | Kommentar schreiben

  • 1. Marcus am 4. September. 2006 um 12:49

    Mein Beitrag zum Stöbern: Einfach für Alle; Vitaly Friedman: Web Developer’s Handbook und Bookmarks für Webdesigner und Webentwickler

  • 2. Ralph am 5. September. 2006 um 20:06

    Danke. So ist mein Aufruf nicht ganz daneben gegangen. ;-) Ich komme auch noch nach mit meinen Links und Buchtipps, wenn der Druck etwas nachgelassen hat hier. -

    Ich weiss gar nicht, warum ich noch ständig Leute und ihre Projekte und Texte promote, wenn nicht ab und zu was zurückkommt.

  • 3. Christian Fischer am 5. September. 2006 um 22:29

    … ich würde ergänzen:
    Wie machen’s die anderen? Schaue Dir andere Seiten an.
    Besorg Dir Analyse-Werkzeuge - gerade den Firefox kann man wunderbar ausbauen:
    Die Web Developer Toolbar bietet zB die Möglichkeit, sowohl einzelnen Elemente der besuchten Seite zum umrahmen und so deren Aufbau zu verstehen.
    Ein Shortcut zeigt die Seite ohne das CSS, um zu sehen, wie der semantische Aufbau ist.

    Aardvark macht ähnliches, erlaubt aber auch Manipulationen der Seite.
    X-Ray wiedrum blendet die verwendeten Tags in die Seite direkt ein.

    So kann man sehr gut lernen, wie man mit gutem (X)Html und CSS verschiedene Dinge umsetzt - gerade am Anfang, wenn man noch sehr an Tabellen gewöhnt ist stellt sich oft die Frage “Wie kann ich dieses oder jenes Layout in möglichst auch noch semantisch sinnvolle Elemente packen?”

    Als Anregung und als nette Möglichkeiten-Schau kann da der CSS-Zen Garden dienen.

    : Ich weiss gar nicht, warum ich noch ständig
    : Leute und ihre Projekte und Texte promote,
    : wenn nicht ab und zu was zurückkommt.

    Ich glaube (und schrieb auch letztens), dass ein zu guter Artikel auch überfordern kann.
    Ich bin z.B. jetzt das dritte Mal hier und komme jetzt dazu, etwas hoffentlich sinnvolles zu antworten ;-)

  • 4. Christian Fischer am 5. September. 2006 um 22:34

    Ach ja, und ganz wichtig:
    Wenn man beim Entwickeln gleich den Html-Validator im Blick hat, sieht man Fehler gleich und nicht erst abends, wenn man dann mal ans validieren denkt.
    Meiner Erfahrung nacht ist es viel einfacher, beijedem neuen Elemnt in der Seite sofort gegenzuchecken und ggf. zu korrigieren, als wenn man schon viele weitere Elemente auf das fehlerhafte ausgesetzt hat.

  • 5. Ralph am 5. September. 2006 um 22:44

    Christian, schoene und konkrete Ergänzung, was dem Artikel fehlt. Habe allen Vertiefungen tapfer widerstanden. ;-)

    An die “Web Developer Toolbar” habe ich auch gedacht. Allein dass man damit das CSS in einer Spalte editieren und dabei zusehen kann, wie sich die Seite im Browser ändert. Ich benutze das nicht, ich werkel lieber im Editor. Aber Umschalt-Apfel-S in Flock oder Firefox für den Seitenaufruf ohne Stylesheet benutze ich recht häufig. Ach, was schreibe ich, wer als Webdesigner den “Web Developer” nicht entdecken mag, dem ist nicht zu helfen. ;-)

  • 6. Ralph am 6. September. 2006 um 00:01

    Drei Bücher, die ich gerne allen empfehle, die ihre ersten Schritte mit den Webstandards gemacht haben:

    Håkon Wium Lie und Bert Lie: Cascading Style Sheets. Designing for the Web (Gabs mal auf deutsch)
    Björn Seibert und Manuela Hoffmann: Professionelles Webdesign mit (X)HTML und CSS
    Dan Cederholm: Bulletproof Webdesign

    Und wer mehr will zum Thema CSS, besuche die Bücherliste auf Styleworks

  • 7. Christian Fischer am 6. September. 2006 um 08:34

    Danke für die Ergänzung des Links, Ralph, aber ich meinte die Firefox-Erweiterung
    Die nimmt mir immer das letzte Argument für “Ach, guck ich gleich”.
    Man sieht direkt bei jedem Schritt im Browser nicht nur, ob ein Element dort steht, wo es soll, sondern auch ob man Mist gemacht hat :-)

  • 8. enlaces de 2006-09-06 en &hellip am 6. September. 2006 um 11:42

    [...] 6 - Wie werde ich Webdesigner im Sinne der Webstandards? Nehme ich das Verhältnis von Websites, die in unübersichtlichen Tabellenkonstrukten stecken und denjenigen, die nach den Webstandards erstellt sind, so sehe ich ein Missverhältnis zugunsten der alten Technik. Ein Grund der eher schleppenden Akzeptanz d (tags: read howto artikel web blog webdesign webstandards css) [...]

  • 9. Wie werde ich Webdesigner&hellip am 6. September. 2006 um 20:47

    [...] Er wendet sich dabei vor allem an Einsteiger und Menschen die sich neu mit dem Thema beschäftigen wollen. [...]

  • 10. Connie am 9. September. 2006 um 00:15

    ich verteidige ja ständig valides HTML und valides CSS und predige das, aber ehrlich, wenn ich mich dann hinsetze und eine ganz einfache Seite gestalten will und dann validiere ich und alles ist ok und sieht auch so aus wie ich es will in OPERA und Firefox,

    dann brauche ich das nur einmal in IE zu öffnen und da haben wir dann den Salat.

    Solange dieser Scheißbrowser sich immer noch nicht an die Regeln hält, setze ich doch tatsächlich für eine kleine Seite wieder Tabellen ein anstatt mich wieder wochenendelang rumzuärgern und mir Lebenszeit stehlen zu lassen.

    Man kann es mit diesem ganzen CSS-Geraffel auch manchmal wirklich übertreiben. Manchmal kommt es auch auf die Präsentation eines Inhaltes an, es muss dann auch mal schnell gehen können und es soll vor allem FREUDE machen

    und deshalb liebe Freunde, predige ich WASSSER und trinke ab und an WEIN!

  • 11. Ralph am 9. September. 2006 um 00:22

    Neben “Katastrophenskandal” gehoert seit heute auch “CSS-Geraffel” zu meinen Favoriten des Jahres. ;)

  • 12. Connie am 9. September. 2006 um 09:27

    Hallo Ralph,

    is doch soo ;=(

    Aber warum schreibst du Umlaute aus? Hat das auch was mit Barrierefreiheit zu tun?

  • 13. Ralph am 9. September. 2006 um 11:18

    Unbewusst, damals beim Email schreiben angewoehnt und nicht wieder ganz losgeworden.

  • 14. OPPI am 11. September. 2006 um 08:33

    Hallo Ralph, ein sehr guter Artikel!
    Ja, der IE, der hat mir auch schon viel Freude bereitet… da hilft nur probieren, testen… oftmals scheint es auch keine allgemeingültige Regel zu geben… mal klappt eine Sache, dann wieder nicht… dann könnte ich in die Schreibtischkante beißen :-)

    Wurde schon das Buch “Eric Meyer’s CSS” erwähnt?

  • 15. Jakob am 13. September. 2006 um 11:31

    Wen eglische Bücher nicht schrecken:

    “Web Standard Solutions” von Dan Cederholm ist IMHO das beste CSS/Standarts Kochbuch für den engagierten Anfänger.

    ..und hat schon irgendwer Jeffry Zeldmans “Designing With Webstandards” erwähnt?
    Das Buch hat mich erst dazu gebracht, die Layout Tabellen über Bord zu werfen.

  • 16. Christine am 16. September. 2006 um 03:11

    Zitat: “Ein Grund der eher schleppenden Akzeptanz der Webstandards hierzulande sind wohl die höheren Anforderungen an die Webdesigner.”

    Einspruch, Euer Ehren! :-)
    Die Anforderungen sind nicht wirklich höher - sie sind anders, ja.
    Wenn ich daran denke, was für ein Aufwand an der Pflege einer Tabellen-Seite hängt … na ja.

    Der Grund ist ein anderer:
    “Es funktioniert doch - was wollt ihr?”

    Ja, auch mir fehlen die Argumente dagegen - die, die jeder versteht, meine ich. :-(
    Wenn schon mir die fehlen, was ist erst mit Leuten, die nicht einmal danach suchen?
    Das ist IMHO das wahre Dilemma.

  • 17. Ralph am 16. September. 2006 um 09:10

    Einspruch, Gnädigste! ;-)

    Die Anforderungen sind höher, das weiss ich aus eigener Erfahrung, weil die Gestaltungsmöglichkeiten (und dafuer wurde CSS entwickelt) wesentlich höher sind, der Aufwand aber, wenn man seine Lösungen gefunden, auch wieder geringer wird (Stichwort Tabellenungetüme).

    Aber lassen wir das, ich persönlich möchte auf die Möglichkeiten echten CSS-Design nicht mehr verzichten. Ich würde dann kein Webdesign (ich meine nicht “Webentwicklung”, sondern Webdesign mit Schwerpunkt Interface, Layout, Illustration, CSS-Coding) mit guten Gewissen mehr verkaufen können. Allein die unnötigen Tabellenkonstrukte gehören für mich zu den veraltenden Gestaltungstechniken, was nicht heißt, dass der Einsatz von Tabellen keinen Sinn mehr mache, im Gegenteil, für bestimmte Sites wie Community-Plattformen mit vielen Features, Online-Shops und dergleichen sind sie unverzichtbar.

  • 18. Christine am 16. September. 2006 um 11:03

    Siehste! :-)
    Die Tabellenungetüme meinte ich. Die sind nicht so anspruchsvoll - stimmt. Aber sie machen imensen Aufwand.
    Also lassen wir es dabei - so uneins sind wir wohl gar nicht.

    Aber warum trennst Du Webdesign von Webentwicklung? Das sind doch nur zwei Bestandteile eines Ganzen. Ich denke, man kann beides nicht mehr guten Gewissens ohne CSS anbieten. Außerdem ist die Entwicklungsseite diejenige, deren Aufwand sich durch CSS reduziert, wenn das Ziel einfaches, sauber strukturiertes HTML ist.

    Deinen letzten Satz verstehe ich allerdings nicht. Wieso sind Tabellen für Community-Plattformen unverzichtbar? An welcher Stelle?

  • 19. Webstandards vs. Tabellen&hellip am 25. September. 2006 um 16:50

    [...] Ralph Segert fragt “Wie werde ich Webdesigner im Sinne der Webstandards?” - Interessante Frage und einige Antworten. [...]

  • 20. Angelika Ronné am 11. Oktober. 2006 um 18:50

    lieber ralph,
    spät aber von ganzen herzen nochmals dank für unser gespräch am 19.juli! ja ich habe diesem gespräch einen eintrag in meinem kalender gewidmet.
    es ging um das thema standard konformes webdesign und ich hatte zu der zeit noch kein buch entdeckt mit dem ich entspannt umlernen oder besser gesagt neues lernen konnte (von tabellen layout mit dreamweaver 4!! zu xhtml1.0 bzw.html 4.01 strict und css “zu fuss”) nun ja, und am 08.september habe ich dann dass o’reilly buch :
    html mit css und xhtml , von kopf bis fuss von elisabeth und eric freemann entdeckt.(kostet 44,90 euro.) und genau dieses buch hat noch in der welt der gut verständlich geschriebenen “computer” bücher gefehlt.es richtet sich an anfänger und das war ich ja letztendlich, was ich jetzt nach der lektüre des buches eingesehen habe. ich kann es also wärmstens empfehlen und es macht sogar richtig spass zu lesen und zu lernen!ja und hab auch dank für deinen ausführlichen artikel vom 4. september mit den tollen wertvollen links!!! den ich zwar eben erst gelesen habe, aber der mir trotzdem nochmal wertvolle infos gegeben hat.
    könnte mir sogar vorstellen, dass du den artikel vielleicht ja auch aufgrund unseres gespräches verfasst hast?!…also vielen,vielen dank nochmals und vielleicht freut sich ja der eine oder die andere über den buchtipp von mir. mit lieben grüssen von angelika aus hamburg

  • 21. ff am 23. November. 2006 um 17:39

    Hm…tja vlaides HTML? Traumvorstellung.Wirklich valides HTML gibt es nicht, insbesondere, wenn man zwecks den ganzen IE-Macken auf CSS-Hacks angewiesen ist. Ich plädiere für maximale Validität. Und die erreicht man am besten, indem man das beste aus beidem nimmt und kombiniert: HTML und CSS. Sprch: ich verwende Tabellen und CSS. Mal so, mal so. Jemand schon mal rowspan mit CSS probiert :-?

  • 22. Tillmann Scheele am 21. Dezember. 2007 um 11:45

    Ich habe mir skEdit aufgrund dieser Seite angesehen und sofort gekauft. Schickes Programm. Macht einem das Leben doch wesentlich einfacher. Dank dem günstigen Dollarkurs nur knapp über 21 Euro mit allen Kosten.

    Vielen Dank Ralph! :-)

  • 23. Ralph am 21. Dezember. 2007 um 12:01

    Danke fuer Dein Feedback. Es freut mich, dass wir die Begeisterung fuer ein Produkt teilen :-)

bitte eintragen
wird nicht angezeigt


Berechne die Summe aus 4 + 9 ?    

Kommentare mit mehr als einem Link werden moderiert
Erlaubtes HTML: <a href="" title=""> . <blockquote> . <em>

ani_top

Bottombar