Webseiten-Infos.de » Webstandards

Adventskalender 2010 der Webkrauts

Dieter — Sun, 28 Nov 2010 21:30:47 +0000

Auch dieses Jahr gibt es wieder einen Adventskalender der Webkrauts. (siehe auch “Webkrauts-Adventskalender 2010” im Blog von Jens Grochtdreis, dem Gründer der Webkrauts).

Die Webkrauts setzen sich für Webstandards ein. Erstmalig haben die Webkrauts diesmal ein Oberthema festgelegt: Es lautet Kunden.

Nun beschäftige ich mich lediglich als Hobby mit Webdesign und habe keine Kunden. So gesehen habe ich diesmal etwas die Sorge, dass die Beiträge aus dem Adventskalender 2010 für mich nicht so interessant sein werden.

Gleichwohl hoffe ich, auch in dem diesjährigen Adventskalender der Webkrauts wertvolle Tipps und Tricks für den Webworker zu finden, die auch mir weiterhelfen. Schau mer mal.

Auf jeden Fall jetzt schon zu sehen und immer noch lesenswert: Die Artikel aus den früheren Adventskalendern (2005, 2006, 2007, 2008, 2009)!

Adventskalender 2009 der Webkrauts

Dieter — Tue, 01 Dec 2009 21:33:55 +0000

Auch dieses Jahr gibt es wieder einen Adventskalender der Webkrauts. Die Webkrauts setzen sich für Webstandards ein. Da sich ihr Themenspektrum immer mehr erweitert hat, lautet ihr neuer Slogan: Für mehr Qualität im Web.

In ihrem diesjährigen Adventskalender findest Du wertvolle Tipps und Tricks für den Webworker.

Wie auch die Artikel aus den früheren Adventskalendern (2005, 2006, 2007, 2008) sehr lesenswert!

Webstandards mit blauen Mützen unterstützen?

Dieter — Mon, 30 Nov 2009 21:03:24 +0000

Heute ist der sogenannte Blue Beannie Day 2009. Durch blaue Mützen soll angezeigt werden, dass man Webstandards unterstützt.

Den Gedanken an sich finde ich erst mal schwachsinnig. Einem Avatar oder Bild eine blaue Mütze aufzusetzen kostet erst mal Zeit und ist an sich kein Fortschritt für Webstandards. Aber darum geht es dabei auch nicht. Vielmehr soll diese Aktion auf Webstandards aufmerksam machen. Je mehr Personen sich an dieser Aktion beteiligen, umso mehr wird sie wahrgenommen.

Gerald Brotzek hat in einem Artikel “Mit blauen Mützen Webstandards unterstützen – 30.11.” schön erklärt, was diese Aktion bewirken soll und kann.

Hier noch ein paar weitere lesenswerte Blogbeiträge/Artikel zum Blue Beannie Day (Tag der blauen Mützen):

Blue Beanie Day 2009 von Jeffrey Zeldman
Blue Beanie Day 2009 von Robert Lender
The Web Standards Mafia von Abban

PS: Ich habe übrigens erst heute Abend mitbekommen, dass der 30. November der Tag der blauen Mützen ist und was er konkret bedeutet. Deshalb habe ich es leider nicht mehr geschafft meinem Avatar eine blaue Mütze zu verschaffen. Für mich als Freund von funktionalen, benutzerfreundlichen und zugänglichen Webseiten ausgesprochen schade.

Ich hoffe sehr, dass ich nächstes Jahr rechtzeitig daran denke und dann mitmache.

Kommentare

4. Dezember 2009, Ute schreibt: Ach herrje, bitte nicht mehr weinen :cry: bei dem Smiley bekomme ich ja ein noch schlechteres Gewissen, dass mein guter Vorsatz frühzeitig drüber zu bloggen, nicht klappte. :ups: Ich nehme mir auch gaaaaaaaaaaaaaanz fest vor, nächstes Jahr früher drüber zu schreiben! :)
4. Dezember 2009, Dieter schreibt: Brauchst kein schlechtes Gewissen zu haben. Du hast ja Deine blaue Mütze wieder abgenommen. Ich hätte halt gleich nach der blauen Mütze in Twitter nachfragen sollen. Hab es halt nicht gemacht. Typisch Mann! ;-) Ich habe mal in meinem neuen Motorola Milestone einen Kalendereintrag mit Erinnerungsfunktion machen, damit ich diesen Tag der blauen Mützen nicht mehr versäume. :-)

Internet Explorer sucks!

Dieter — Mon, 09 Nov 2009 00:47:00 +0000

Rund 2 Stunden wendete ich auf um IE-spezifische Probleme mit dem Layout von Webseiten-Infos.de in den Griff zu bekommen.

Ich hätte große Lust Microsoft dafür eine Rechnung zu schicken! Verlorene Zeit, bloß weil sich der Internet Explorer (IE) bis einschließlich Version 7 nicht hinreichend an Webstandards hält. Ich könnte k…!

Diesmal ärgerte ich mich dermaßen, dass ich schon das Ausschalten des Layouts für den Internet Explorer (IE) bis Version 7 testete.

Lediglich dem WordPress-Themes YAML Green (Update), das auf dem CSS-Frameworks YAML basiert, war es mit der mittels Conditional Comment (CC) eingebundenen CSS-Datei für das Sorgenkind Internet Explorer (IE) bis einschließlich Version 7 zu verdanken, dass ich dann doch dort die erforderlichen Anpassungen vornahm.

Liebe Nutzer des Internet Explorers (IE) bis einschließlich Version 7:

Ihr macht die Webdesigner dieser Welt und Euch selbst glücklich, wenn ihr entweder

auf den Internet Explorer 8 aktualisiert (updated) oder
gleich auf einen modernen Browser wie beispielsweise die kostenlosen Alternativen Firefox, Opera, Flock, K-Meleon, Seamonkey, Safari oder Google Chrome umsteigt.

Es ist für mich erschreckend, dass noch immer über 25% der Besucher von Webseiten-Infos.de mit einer veralteten Version des Internet Explorers surfen.

Für ein besseres Web: Aktualisiert Euren Internet Explorer (IE) oder – noch besser – steigt auf einen modernen Browser um (siehe auch browser-update.org)!

So, das musste einfach raus!

Kommentare

9. November 2009, Jens Grochtdreis schreibt: Ich verstehe ja Deinen Frust, kann aber bei Deiner Seite keine problematischen Punkte feststellen. Wo bitteschön sind denn bei diesem recht einfachen Design irgendwelche Probleme bzgl. IE6? Hast Du schonmal daran gedacht, dem IE6 einfach weniger zu geben? Gute Browser können bspw. runde Ecken mit CSS3, alle IE nicht.
9. November 2009, Dieter schreibt: Hallo Jens, danke für Dein Verständnis.
Wo bitteschön sind denn bei diesem recht einfachen Design irgendwelche Probleme bzgl. IE6?
Die Probleme bzgl. IE6 traten insbesondere in der Sidebar mit text-indent und CSS-Grafiken sowie den unterschiedlichen Breiten von Formularelementen auf. Sollte jetzt aber behoben sein. Auch wenn das Design für Dich relativ einfach zu sein scheint, die erforderlichen Korrekturen für den IE < 8 sind für mich schon beachtlich und ärgerlich. Lediglich mit YAML ist das für mich überhaupt mit einem vertretbaren zusätzlichen Aufwand verbunden (siehe bezüglich der Korrekturen für den IE < 8 meine patch_2col_right_seo.css).
Hast Du schonmal daran gedacht, dem IE6 einfach weniger zu geben? Gute Browser können bspw. runde Ecken mit CSS3, alle IE nicht.
Nicht nur daran gedacht, sondern auch schon gemacht. ;-) Schau Dir mal meine CSS-Datei (derzeit green_2col_right-2009-11-04.css) an. Dort findest Du mittels CSS3 realisierte runde Ecken und Schatten um Boxen. Oder schau Dir zu Vergleichszwecken meine Seite einfach mal mit dem Internet Explorer und Firefox, Safari oder Google Chrome an. Beste Grüße Dieter PS: Ich war schon kurz davor dem IE < 8 richtig weniger an CSS zu geben: Nämlich nichts mehr! ;-)
9. November 2009, reizi schreibt: Woher kenne ich das nur? :) Ich möchte nicht wissen, wieviele Stunden ich Microsofts IE Versionen schon gewidmet und Browserweichen gebastelt habe. Richtig spassig wirds auch mit Javascript. Das Problem an der ganzen Geschichte ist, das etliche Firmen immernoch mit IE6, oder IE7 kämpfen. Leider!!! Gruß
9. November 2009, Dieter schreibt: @reizi Browserweiche für den Internet Explorer ist mit den Conditional Comments noch einfach. Schwierig wird es in der Tat mit den Bugs und Besonderheiten des IE < 8 sowie mit JavaScript. Das Problem mit dem IE6 und 7 in Firmen wird leider dazu führen, dass häufig noch einige Jahre diese IE-Versionen beim Layouten berücksichtigt werden müssen. Man kann nur hoffen, dass viele dem Beispiel von Google bei YouTube folgen werden und einfach die Unterstützung einstellen werden. Mit diesem Gedanken kann ich mich immer mehr anfreunden. Gruß Dieter
25. September 2010, Heli schreibt: Schön, dass auch Profis mit dem IE Probleme haben. Ich hoffe, dass er endlich verschwindet. Selbst für einfache Sachen wie Roundies muss man für den IE eine umständliche Konstruktion basteln.
25. September 2010, Dieter schreibt: @Heli Schön ist anders! Der IE 8 ist überwiegend in Ordnung. Abgerundete Ecken (rounded corners) mittels CSS3 beherrscht er zwar nicht, aber dann bekommt der IE-Nutzer halt nicht abgerundete Ecken zu sehen und gut ist. Das Ganze wird in den letzten Jahren unter dem Stichwort Progressive Enhancement diskutiert.

Neues Fenster für alle Seiten?

Dieter — Wed, 23 Sep 2009 13:01:15 +0000

Dank einer Erweiterung des JavaScripts von Fritz Weisshart für das Öffnen externer Seiten (Fremde Seiten in neuem Fenster?) wird nun das gesetzte Häckchen, solange der Browser geöffnet ist, auf allen Webseiten von Webseiten-Infos.de beibehalten. Realisiert hat er das – wie von Ute vorgeschlagen – mit einem Cookie.

Aber das ist noch nicht alles!

Zusätzlich schrieb er das JavaScript so, dass

die Checkbox mit der Frage “Fremde Seiten in neuem Fenster?” nicht erscheint, wenn der Besucher der Seite JavaScript deaktiviert hat, und
auch ein Anklicken des Textes zu einem Häckchen in der Checkbox führt.

Zu 1.: Tricky! Das Formular mit der Checkbox und Frage wird nun nicht mehr einfach nur als (X)HTML-Code, sondern als JavaScript-Code eingebunden. Kein JavaScript, kein Formular. So werden Besucher, bei deren Browser JavaScript deaktiviert ist oder deren Ausgabegerät (z.B. Screenreader) kein JavaScript unterstützt, erst gar nicht mit einer Funktion konfrontiert, die in der konkreten Situation nicht verfügbar ist.

Zu 2.: Dadurch, dass die Frage dem Formularelement label zugewiesen ist, funktioniert das Häckchen setzen oder entfernen auch über das Anklicken des Textes.

Tatsächlich konnte ich die Erweiterung des JavaScripts einfach mit Kopieren und Einfügen (Copy & Paste) des Codes aus dem Artikel von Fritz Weisshart realisieren.

Lediglich der Internet Explorer 6 (IE6) scheint mal wieder aus der Reihe zu tanzen. Er behält das Häckchen nicht. Dieser veraltete Browser verhält sich leider nicht standardkonform. Wieder ein Grund mehr, diesen Browser durch einen modernen Browser oder neuere Version des Internet Explorers zu ersetzen.

Ganz herzlichen Dank an Fritz Weisshart für den gelungenen Artikel mit Einbauanleitung.

Leider kann ich nicht an dem A-Tag´09 (Fachkonferenz “Barrierefreies Internet”) teilnehmen und seinen dortigen Vortrag “Böses Javascript – gutes Javascript” hören. Aber erfreulicherweise hat er dazu auf seiner Website den Artikel ““Böses” JavaScript – “Gutes” JavaScript?” freigeschaltet.

Kommentare

23. September 2009, Fritz schreibt: Hallo Dieter, freut mich, dass ich helfen konnte. Deine Aversion gegen den IE6 teile ich sehr wohl. Kann es sein, dass du ihm diesmal Unrecht tust? Er merkt sich das Häkchen nämlich sehr wohl. Zumindest solange du innerhalb des Blogs bleibst. Beim Wechsel zu Startseite & Co. klappt das hier leider nicht. Aber daran ist Der IE unschuldig. ;-)
23. September 2009, Fritz schreibt: Hallo Dieter, das obige Problem kannst eventuell per JavaScript lösen. Bitte ändere das Script, von dem das cookie gesetzt wird, wie folgt: document.cookie='extern=externoeffnen; path =/';
24. September 2009, Dieter schreibt: Hallo Fritz, da ich keine Originalinstallation des IE6 habe, verwende ich verschiedene Software-Pakete, die mehrere IE-Versionen zur Verfügung stellen (siehe hierzu den Blogbeitrag "Webdesign mit verschiedenen IE-Versionen testen"). Das Problem tritt weiterhin vollständig mit dem IE6 von Multiple IE auf. Nachdem ich Deinen Änderungsvorschlag befolgt habe, bin ich auf die Idee gekommen, die Funktionsfähigkeit des Skripts auch mit dem IE6 des IETesters und der Internet Explorer Collection zu testen. Dort klappt es wunderbar. Das Problem liegt anscheinend bei dem Software-Paket Multiple IE. Ich habe also in der Tat diesmal dem IE6 unrecht getan. :ups: Ganz herzlichen Dank für das Überprüfen und die Codekorrektur. :hurra: Ich streiche gleich den Absatz zum IE6 im Blogbeitrag.
2. Oktober 2009, SEOux Indianer schreibt: Hi, die Blog Startseite /blog/ ist komplett auf noindex und nofollow gestellt. Absicht?
2. Oktober 2009, Dieter schreibt: Hi SEOux Indianer, gut beobachtet. Und um Deine Frage zu beantworten: Ja, um doppelten Inhalt (double content) zu vermeiden. Die Seite /blog/ zeigt den neuesten Blogbeitrag als Archivseite, die allerdings schon den Volltext einschließlich Kommentarfeld anzeigt. Ein Mausklick auf den Titel des jeweiligen Blogbeitrags zeigt dann den (echten) Blogbeitrag ohne noindex und nofollow.
13. Oktober 2009, Thomas Scholz schreibt: Wie kommst du darauf, daß jemand, der einen Screenreader benutzt, auch Javascript abschaltet? Beides hat nichts miteinander zu tun. Der Screenreader liest einfach vor, was der Browser rendert. Sinnvoll ist diese Einstellung auch für sehende Nutzer nur dann, wenn du Links auf andere Webseiten auch irgendwie kennzeichnest. Sonst verringerst du die Vorhersagbarkeit ohne Not.
13. Oktober 2009, Dieter schreibt: @Thomas Weiß nicht mehr wie ich auf den unzutreffenden Gedanken gekommen bin, dass jemand, der einen Screenreader benutzt, kein JavaScript hat. Habe es gleichwohl mal mit dem Firefox Addon FireVox getestet und dann die entsprechende Textpassage gestrichen. Die Links im Text auf andere Webseiten sind im Text mit den Icons Erdkugel, W für Wikipedia bzw. einem pdf-Icon gekennzeichnet. Besuchte Links erhalten dagegen - unabhängig davon ob sie intern oder extern sind - einen Haken. Damit sind bereits besuchte Links leider nicht mehr eindeutig unterscheidbar. Damit habe ich für bereits besuchte Links, das von Dir beschriebene Problem der Vorhersagbarkeit. Das steht in Konflikt mit meiner Zielsetzung durch ein anderes Icon für besuchte Links diese nicht nur farblich von nicht besuchten Links für den Besucher unterscheidbar zu machen. Mal schauen, ob ich verschiedene Icons für besuchte Links von externen und internen Seiten verwenden kann oder sonst wie löse. Danke für Deine beiden berechtigten Hinweise. :) Dein Kommentar war wieder äußerst hilfreich. :freu2:
13. Oktober 2009, Thomas Scholz schreibt: Ich halte die Unterscheidung zwischen »externen« und »internen« Links generell für fragwürdig; deine Probleme beim Kennzeichnen unterstreichen das nur. In den Kommentaren beispielsweise, die ich beim Schreiben des letzten Beitrags vor Augen hatte, triffst du sie ja nicht. Für den Leser ist dieser Unterschied unwichtig: Er interessiert sich für den Inhalt, nicht für den Standort. Oh, und ich habe die Kuller nicht als Weltkugel identifiziert.
13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung interne und externe Links ist in der Tat fragwürdig. Sie resultiert aus der ebenfalls fragwürdigen Alternative Links in einem externen Fenster zu öffnen. Es ist aber nur ein Alternativangebot, das Gewohnheiten von Benutzern wie meiner Freundin berücksichtigt. Sie ist es gewohnt, dass sich externe Links in einem neuen Fenster öffnen. Wie das mit der Maus zu bewerkstelligen ist, hat sie genauso wie ich nicht parat. Standardmäßig sieht das für die Kennzeichnung von Links hier eingesetzte WordPress-Plugin Link Indication die Einbeziehung von Kommentaren übrigens vor. Ich habe diese Einstellung lediglich geändert, weil ich es nicht hinbekam die Kommentar-Permalinks etc davon auszunehmen. Da werde ich mich wohl noch einmal mit beschäftigen müssen. Auch wenn ich Deine Auffassung teile, dass der Leser sich für den Inhalt und nicht den Standort interessiert, so kann der Standort gleichwohl wichtig und bedeutend sein (vertrauenswürdig?). Die Weltkugel ist doch soooo schön. Wie konntest Du die nicht erkennen? :roll:
13. Oktober 2009, Fritz schreibt: @Dieter und @Thomas Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt. Mit neuem Fenster hat das erst mal nichts zu tun. Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren - oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)
13. Oktober 2009, Thomas Scholz schreibt: Ich habe jetzt eine Weile herumgesucht und auf Twitter nachgefragt, konnte aber keine einzige Studie dazu finden, ob die Leser sich für den Unterschied interessieren. Offenbar hält niemand die Frage für wichtig genug. Hinzu kommt, daß diese Unterscheidung oft gar nicht so genau zu treffen ist: Wenn ich von meinem Hauptblog zu meinem Operablog linke, dann ist dieser Link »interner« als der von meinem Githubprofil zu einem anderen. Im ersten Fall liegen nämlich die Texte und das Aussehen größtenteils in meiner Hand, im zweiten nicht. Wenn der Grad meiner Kontrolle nicht das Kriterium für die »Externalität« ist – welcher dann? Die Domain kann es nicht sein; das illustriert der zweite Fall. Und wenn ich schon an so einfachen Punkten ins Zweifeln gerate – wie will dann ein Leser, der weder meine Schlußfolgerungen kennt, noch zwingend die Bilder sieht, erraten, welcher Link »nach außen« führt und welcher nicht? Mein Verdacht: Diese Differenz existiert eigentlich nicht, und sie ist auch nicht der wirkliche Grund für die Kennzeichnung. Das eigentliche Motiv für die technische Implementation ist der Spieltrieb, das berühmte »weil es geht«. ;) Über die Weltkugel habe ich auch ein Weilchen nachgedacht. Ich erkenne eine Weltkugel an Afrika. Wenn der Kontinent deutlich zu sehen ist, dann vermute ich eine Weltkarte, sonst nicht. Zwar sind auch Weltkugeln möglich, auf denen Afrika nicht oder »verzerrt« zu sehen ist, aber die entsprechen eben nicht meiner Sehgewohnheit. Ich finde dieses Symbol auch ein bißchen … schräg. Ehe du mich darauf hingewiesen hast, wußte ich nicht, daß deine Website auf einem anderen Planeten gehostet wird. ;) Ein Pfeil in eine Box hinein und einer aus ihr heraus bildeten das, was du im Sinn hast, vermutlich besser ab. Zumindest solltest du das Symbol, für das du dich entscheidest, neben die Checkbox mit dem Text setzen, damit man sich das Raten erspart. Und da ich einmal im Pedantenmodus bin (ich hör gleich auf ;)): Was machen denn Besucher, die nicht den IE 6 benutzen? Die wollen sicher kein neues Fenster, sondern schlimmstenfalls einen neuen Tab. Dein Text behauptet aber, daß du diesen Wunsch nicht respektieren wirst. Daß du das nicht kannst, weiß der normale Leser ja nicht. Wo ist denn hier die Vorschau? Hm …
13. Oktober 2009, Dieter schreibt: @Fritz
Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt.
Mit dem Beispiel Vertrauenswürdigkeit am Ende meines Kommentars hatte ich das "fragwürdig" insoweit eingeschränkt. ;-)
Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren
Das hatte ich mit dem Ausdruck "Alternativangebot" zum Ausdruck bringen wollen. Danke für die Klarstellung.
– oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)
Anscheinend konnte Thomas die schöne Weltkugel nicht ohne Hinweis als solche ausmachen. Darüber hinaus teile ich seine Auffassung, dass für externe Links ein wegführender Pfeil besser wäre. Das Symbol dürfte dafür eher geläufig sein und sich damit als Quasi-Standard etablieren. Ich beabsichtige deshalb die schöne Weltkugel durch einen wegführenden Pfeil zu ersetzen.
13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung zwischen internen und externen Links ist zumindest technisch möglich und kann neben dem Seitenbetreiber auch Besucher interessieren. Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein. So gibt es durchaus Nutzer, die es gewohnt sind und deshalb auch erwarten, dass sich externe Links in neuen Fenstern oder Tabs ;-) öffnen. Das mag nicht dem XHTML-Standard strict entsprechen, der target="_blank" nicht erlaubt, ändert aber nichts an durch Erfahrung geprägte Erwartungshaltungen. Für einen solchen Fall halte ich das Angebot der Checkbox "Fremde Seite in neuem Fenster" und die optische Unterscheidung von internen und externen Links für sinnvoll. Über einen Spieltrieb verfüge ich definitiv. Das hast Du gut beobachtet. Hier setze ich ihn jedoch nicht als Selbstzweck ein, sondern für den o.g. Zweck. In der Tat sollte ich aber nicht den Besuchern verraten, dass diese Website auf einem anderen Planeten gehostet ist. ;-) Ich beabsichtige das deshalb möglichst bald zu verschleiern und stattdessen den Quasi-Standard eines herauszeigenden Pfeils (externe Links) oder eines in einer Box befindlichen Pfeils (interne Links) zu verwenden. ;-) Dein Vorschlag, das Icon ebenfalls neben der Checkbox anzuzeigen, ist genial. Und auch Dein Hinweis "Fenster oder Tab" ist ausgesprochen hilfreich. :freu2: Kommen wir zu Deiner Frage:
Wo ist denn hier die Vorschau? Hm …
Meinst Du damit eine Vorschaufunktion für Kommentare? So eine schöne wie auf Deiner Seite? Dann verrate mir bitte wie Du sie realisiert hast. Hast Du ein Plugin eingesetzt? Falls ja, welches? Dann prüfe ich gerne dessen Einsatz auch hier. :-) PS: Ich liebe Deinen Pedantenmodus. Keine Sorge, ich bin nicht masochistisch veranlagt. Du bringst da einfach die Probleme so schön auf den Punkt. ;-)
13. Oktober 2009, Seouxindianer schreibt: Oh, das erklärt das noindex. Verwehrst Du Suchmaschinen aber nicht auch den Zugriff auf die einzelnen Artikel, wenn Du für die gesamte page nofollow verwendest?
13. Oktober 2009, Thomas Scholz schreibt: @Dieter: Wie sähe in den beiden von mir genannten Fällen die Unterscheidung zwischen »intern« und »extern« aus? Das Problem kann man sogar auf nur einen Fall reduzieren: Wenn ich in meinem Operablog Links setze. Sind Links auf meine anderen Websites »intern« und solche auf andere Operablogs »extern«? Oder umgekehrt?
Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein.
Das habe ich auch nicht geschrieben. Ich habe das nur als weiteres Indiz dafür genommen, daß die Frage danach irrelevant ist. Bei der angeblichen »Nutzergewohnheit« möchte ich dir entschieden widersprechen, bis du mir deine Vermutung mit Fakten unterlegst. Ich erlebe das anders. Google, Yahoo, Wikipedia – keine dieser Websites versucht, Links auf andere in der Voreinstellung in einer separaten Instanz zu öffnen. Das ist üblich. Ausnahmen sind Webapplikationen, deren Bedienung an eine Session gebunden ist: Twitter oder Gmail etwa. Wenn man verallgemeinern möchte, dann eher so: Alle mit target=_blank versehenen Links führen auf Websites, auf die der »Aufreißer« glücklicherweise keinen Einfluß hat. Daraus folgt aber nicht, daß Links auf andere Websites üblicherweise in einem neuen Fenster geöffnet werden. Nebenbei bemerkt: Ich finde es ein bißchen kurios, daß du plötzlich »das Übliche« als Argument für eine gestalterische Entscheidung heranziehst. Neben dem logischen Problem (»üblich« ist nicht gleich »gut«) wendest du dich doch mit deiner übergroßen Schrift genau gegen eine Konvention. Hier sähe ich meine voreingestellten 16px lieber als deine 19px. Das finde ich viel wichtiger als die Fensterfrage. ;) Jetzt hast du auf jeder einzelnen Seite eine Option, das 90% deiner Leser nicht brauchen … Meine Kommentarvorschau arbeitet mit dem Plugin »Live Comment Preview«. Ich habe darin nur überflüssiges Markup und die flackernde Gravatarvorschau entfernt; das kannst du sicher leicht selber nachvollziehen.
13. Oktober 2009, Thomas Scholz schreibt: Ich finde es übrigens sehr verwirrend, daß du das Element CODE unangekündigt in PRE verwandelst – selbst wenn es mitten im Satz steht und keinen Zeilenumbruch enthält.
14. Oktober 2009, Dieter schreibt: @Seouxindianer Ja, ich könnte und sollte wohl besser die Seiten von nofollow auf follow umstellen. Allerdings gibt es bei mir keine Crawling-Probleme deshalb, weil ich auf jeder Seite ganz oben auch den Link zur Sitemap habe. Und die Sitemap verlinkt auf die Seiten mit den "echten" Blogbeiträgen. :-) Jetzt habe ich mir gerade irgendwie das Template für die Blogseite "zerschossen". Muss ich erst einmal das Problem beheben.
14. Oktober 2009, Dieter schreibt: Blogseite funktioniert wieder und nun kann ich mich den offenen Kommentaren widmen. ;-) Das Problem mit der "statischen" Seite Blog war kurios. Sie ließ zwar das Template blog.php auswählen und speichern, aber verwendete es nicht mehr. :schockiert: :confused: :irre: Vielmehr wurde stattdessen das Standardtemplate (wahrscheinlich page.php) abgearbeitet. Wie auch immer. Nachdem ich die Template-Datei blog.php in blogliste.php umbenannt hatte und auch den Template Name entsprechend geändert, ging es wieder problemlos. :hurra:
14. Oktober 2009, Dieter schreibt: @toscho Ich fange mal von hinten an. ;-) Bin schwer erkältet und gehe gleich wieder ins Bett. Zudem kann ich dazu kurz und schnell antworten. Wo wandele ich denn ein Element code in pre um? Das target=_blank in Deinem Kommentar? Dann ist das Plugin CodeColorer wohl der Schuldige. Hast Du eine bessere Alternative als Vorschlag? Danke für den Hinweis auf das Plugin Live Comment Preview. Ich habe es hier eingebaut. Lediglich der große Textabstand zum Rand nach oben und links stört mich noch. Hast Du einen Hinweis für mich, wo ich den verringern kann? Zum eigentlichen Thema komme ich dann morgen. Gut Nächtle.
14. Oktober 2009, Thomas Scholz schreibt: Ich benutze HTML Purified; das kann zwischen code und pre unterscheiden. Die Ausgabe der Kommentarvorschau kannst du mit CSS beeinflussen. Wie das bei dir im einzelnen auszusehen hat, kann ich jetzt nicht sagen. Bei mir haben sich übrigens Leser beschwert, die eine langsame Internetverbindung haben: Der Gravatar wurde immer wieder neu geladen, deshalb habe ich das entfernt. Wenn du daran herumschraubst, dann schreib dick »Vorschau« über die Vorschau. Sicher ist sicher. :) Aber laß dir Zeit; kurier dich erstmal aus.
15. Oktober 2009, Dieter schreibt: @Thomas Fange langsam an und habe erst einmal die Kommentarvorschau eingerichtet und einen Blogbeitrag dazu geschrieben. Vielen Dank für den Tipp! In die Kommentarvorschau habe ich einfach Kommentarvorschau geschrieben. Ich hoffe, das reicht. Auf das eigentliche Thema komme ich noch zurück. ;-)
18. Oktober 2009, Dieter schreibt: @Thomas Wieder von hinten nach vorne. ;-) HTML Purified scheint eine interessante Alternative auch unter sicherheitstechnischen Gesichtspunkten zu sein. Bis auf die automatische Veränderungen von pre zu code bin ich mit Codecolorer sehr zufrieden. Deshalb gedenke ich nur umzusteigen, wenn es Kompatibilitätsprobleme mit Codecolorer geben sollte. Zur Schriftgröße hier: Ich wusste nicht, dass ich hier 19 px einsetze. Ich verwende grundsätzlich em und %. ;-) Ja, die Schriftgröße beim Text liegt über dem Durchschnitt. Insbesondere folgende Gründe waren für mich ausschlaggebend: - Ich wollte die Bedeutung des eigentlichen Textes im Vergleich zu den Inhalten der Sidebar unterstreichen. Deshalb ist die Schrift in der Sidebar kleiner als im Text. - Die Laufweite des Fließtextes sollte eine gute Lesbarkeit ermöglichen und deshalb weniger als 80 Zeichen pro Zeile betragen. - Es gibt leider immer noch den benutzerunfreundlichen Trend zu kleiner Schrift. Es gibt eine beachtliche Zahl an Internetnutzern mit Sehschwäche, für die eine größere Schrift leichter zu lesen ist. Nur so am Rande: Ich habe leider auch schon eine Altersfehlsichtigkeit. Ist denn die Schriftgröße für Dich nur unüblich oder empfindest Du sie als störend? Würde mich mal interessieren. Bezüglich der Weltkugel hast Du mich überzeugt. Ihr ist der avisierte Pfeil gefolgt. An der Überarbeitung der Icons für die Sprite-Datei und den Einbau in den Kommentaren arbeite ich noch; steht aber auf meiner ToDo-Liste weit oben. Fritz und ich haben auf unseren Seiten übrigens Deine Idee mit dem Icon im Text bei der Checkbox aufgegriffen. Danke dafür! Im Übrigen glaube ich nicht, dass überhaupt 10% der Besucher die Checkbox nutzen. Gleichwohl werde ich mal dieses Alternativangebot belassen. Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema. Noch auf einen früheren Vorschlag von Dir zur Verringerung des Grundrauschens: Ich halte ein gewisses Maß an Redundanz um Maus- und Tastaturbenutzer zu bedienen hin und wieder für vertretbar. Deshalb habe ich auch die internen Links "nach unten" und "nach oben" bisher belassen. Die Schlagwortwolke habe ich aber aus der mittleren Subcolumn herausgenommen und lediglich noch mit einem Link im Fußbereich (Footer) bedacht. Damit habe ich zumindest auf der Startseite nun wieder unter 100 Links. Das soll wohl auch unter SEO-Gesichtspunkten sinnvoll sein.
18. Oktober 2009, Thomas Scholz schreibt: Ja, mich stört die Schrift. Sie ist bei mir auch größer als bei dir, weil du das Problem der Mindestschriftgröße vergessen hast und schon für body auf 75% gehst, die mein Browser gar nicht erreichen darf. Ich brauche meistens genau 16px. Ich bin etwas kurzsichtig, meine Brille hat also verkleinernde Zerstreuungslinsen. Deshalb ist meine Mindestschriftgröße 14px. Und ich lese normalerweise sehr schnell, indem ich mehrere Zeilen auf einmal erfasse, deshalb sollte die Schrift nicht übermäßig groß sein. Aber hier bekomme ich die falsche Größe, gerade weil ich mir die richtige eingestellt habe.
Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema.
Wozu? Das ist sehr viel unzuverlässiger als einfach die Cookies zu zählen.
18. Oktober 2009, Dieter schreibt: @Thomas Danke für Deine ausführliche Antwort und den Screenshot. Das wusste ich nicht, dass es auf Webseiten-Infos.de das Problem mit der Mindestschriftgröße gibt. Umstellung auf px kommt wohl wegen der Probleme beim IE6 nicht in Frage. Bisher kommen immer noch (!) etwa 20% der Besucher auf Webseiten-Infos.de mit diesem Browser vorbei. Übrigens immer noch über 50% der IE-Besucher. :irre: Verstehe ich Deinen Artikel richtig, dass die zweite Lösungsmöglichkeit mit 100.01% als Standard-Schriftgröße und dann davon jeweils em das Mindestschriftgrößen-Problem mildern oder gar lösen würde? :hilfe: Falls ja, würde ich mal versuchen das entsprechend zu ändern. Bezüglich der Checkbox für externe Links hatte ich an Cookie zählen nicht gedacht, weil ich bisher nicht wusste, dass ich das machen könnte. Stellt sich für mich aber immer noch die Frage wie? Dabei besteht die Restriktion, dass ich nicht programmieren kann. :sad2: Dein Screenshot hat mir übrigens mal wieder gezeigt, dass der Opera text-align:bottom für die Grafik völlig anders darstellt. Habe nun mit margin-bottom:-2px eine hoffentlich bessere Lösung. ;-)
18. Oktober 2009, Thomas Scholz schreibt: Naja, Cookies könntest du einfach zählen, indem du prüfst, ob das Cookie »extern« existiert. Dann setzt du in einer Textdatei einen Wert eins hoch. Sonst setzt du einen zweiten Wert eins hoch. Nach einer Weile siehst du mal rein und vergleichst die beiden Werte. Vorher solltest du aber noch die Funktion so reparieren, daß man beim Herausnehmen des Hakens das Cookie auch wieder verliert. Im Moment kann ich den Haken nur auf einer Seite entfernen; auf der nächsten oder beim reload ist er wieder drin, obwohl ich das ausdrücklich nicht will. Das verdirbt die Statistik natürlich. ;) Und ja, wenn du bei body nicht unter 100% gehst, vermeidest du das Problem. Bedenke auch, daß manche Leute Mindest- und Normalschriftgröße auf den selben Wert setzen. Sobald man irgendwo unter 100% geht, verdoppelt sich der Testaufwand. Bei Inlinegrafiken habe ich mit prozentualem vertical-align bisher die besten Ergebnisse erzielt. Das ist aber immer knifflig.
19. Oktober 2009, Dieter schreibt: @Thomas Naja, einfach ist das Cookies zählen also ohne Programmierkenntnisse anscheinend nicht. Den Fehler mit dem wieder gesetzten Haken konnte ich reproduzieren. Werde mal Fritz darauf aufmerksam machen, da es auch bei seiner Website auftritt. Er hat das JavaScript ergänzt. Ich hoffe, er kann den Fehler fixen. Die Schriftgrößenanpassung ist auf meiner ToDo-Liste mit hoher Priorität. Allerdings bin ich die nächsten Tage auf Reisen und habe danach Besuch, so dass es leider noch ein paar Wochen dauern wird. Bitte um Nachsicht. Danke für den Tipp mit prozentualem vertikal-align. Kannte ich noch nicht. Werde ich mal bei Gelegenheit ausprobieren oder testen.
20. Oktober 2009, Fritz schreibt: @Dieter > Ich hoffe, er kann den Fehler fixen. Ist gefixt. Danke für den Bug
20. Oktober 2009, Dieter schreibt: @Fritz
Ist gefixt. Danke für den Bug
Herzlichen Dank für das Fixen. Werde es aber erst nach Rückkehr aus Basel testen können. Gebe dann Rückmeldung
23. Oktober 2009, Dieter schreibt: @Fritz Habe Deinen Fix auch auf Webseiten-Infos.de übernommen. Problem scheint behoben zu sein. Herzlichen Dank! :hurra:
5. November 2009, Dieter schreibt: Entsprechend dem hilfreichen Hnweis von toscho hat body seit heute nun "fontsize: 100.01%". Ich hoffe, damit zumindest das Problem mit einer vom Nutzer gewählten Mindestschriftgröße bei seinem Browser in den Griff bekommen zu haben. Für Hinweise, wo mir das noch nicht gelungen ist, bin ich jederzeit dankbar. Gerne können mir dazu benutzereigene Stylesheets für diverse Browser zum Selbsttesten zugemailt werden. Mit benutzereigenen Stylesheets habe ich zwar noch keine Erfahrungen, aber das würde ich gerne ändern.

Warum der Internet Explorer 6 weg muss!

Dieter — Fri, 20 Feb 2009 22:41:44 +0000

Inhaltsverzeichnis

Mangelhafte Unterstützung von Webstandards
Viele und gravierende Sicherheitslücken
Wie mit dem Internet Explorer 6 und seinen Nutzern umgehen?
Linktipps

1. Mangelhafte Unterstützung von Webstandards

Webdesigner schimpfen und fluchen über den Internet Explorer 6 (IE6), weil er

immer noch sehr verbreitet ist und
ihnen wegen seiner mangelhaften Unterstützung von Webstandards kräftig Mehrarbeit beschert.

Manche Darstellungsprobleme lassen sich nur mit zusätzlichem Markup und / oder CSS-Hacks etwa mittels Conditional Comments in den Griff bekommen, andere sogar nur mit JavaScript. Ist JavaScript deaktiviert, dann bedarf es einer weiteren Rückfall-Lösung (Fallback-Lösung), damit es nicht zu Zugänglichkeitsproblemen kommt. Hier kann das CSS-Framework YAML punkten, das die meisten Bugs des Internet Explorers abfängt.

2. Viele und gravierende Sicherheitslücken

Darüber hinaus ist den Nutzern des Internet Explorers 6 auch unter Sicherheitsaspekten ein Update dieses Browsers oder noch besser Wechsel zu einem anderen modernen Browser dringend zu empfehlen. Als Alternativen kommen beispielsweise in Betracht:

Aus diesen Gründen sehen auf dieser Website Nutzer des Internet Explorers folgenden Hinweis zu Beginn am Ende jeder Seite:

Diese Webseite sieht mit einem modernen Browser besser aus. Warum solltest Du und wie kannst Du wechseln?

Warum solltest Du und wie kannst Du vom Internet Explorer zu einem modernen Browser wechseln?

Insbesondere aus Sicherheitsgründen, aber auch aus anderen Gründen, empfehle ich Dir einen anderen Browser als den Internet Explorer zu verwenden. Hier ein paar kostenlose Alternativen: Firefox, Opera, Flock, K-Meleon, Seamonkey, Safari, Google Chrome

3. Wie mit dem Internet Explorer 6 und seinen Nutzern umgehen?

Aktuell laufen verstärkt Diskussionen im Web, ob

der Internet Explorer 6 künftig noch unterstützt werden sollte und gegebenenfalls wie,
Einblendungen auf Webseiten, den Internet Explorer (6) upzudaten oder zu wechseln, sinnvoll sind.

Meine persönliche Meinung als jemand, der nicht seinen Lebensunterhalt mit dem Planen, Erstellen und / oder Pflegen von Webseiten verdienen muss, sondern das nur als Hobby betreibt:

Solange der Internet Explorer 6 eine zu berücksichtigende Verbreitung hat, die ich für mich persönlich bei einem Anteil von über 1% der Besucher sehe, werde ich diesen Browser auch weiterhin unterstützen. Allerdings werde ich im Sinne einer stufenweisen Verbesserung (eines progressiven Enhancements) Besuchern mit modernen Browsern ein besseres Webdesign bieten können und auch bieten.
Meine Websites www.webseiten-infos.de und www.dieter-welzel.de enthalten Einblendungen für Nutzer des Internet Explorers, die ihnen empfehlen auf einen modernen Browser zu wechseln. Ich bin mir bewusst, dass das den einen oder anderen Nutzer des Internet Explorers nerven kann. Gleichwohl halte ich das für sinnvoll, damit diese Besucher auf die Probleme durch und mit dem alten Internet Explorer aufmerksam gemacht werden.

4. Linktipps

Hier für interessierte Leser ein paar Links zu diesem Thema, die einen Einblick in die kontroverse Diskussion geben:

Browser-Update.org vom 26. März 2009
Hold on and stand still – das Leben mit dem IE6 vom 6. März 2009 (sehr lesenswert!)
Microsoft hält den IE6 am Leben vom 6. März 2009
Browser in Zeiten wie diesen … vom 6. März 2009
Warum ich Anti-IE6-Aktionen befürworte vom 28. Februar 2009 (sehr lesenswert!)
Adieu IE6. Schleppende Ablösung. vom 26. Februar
Sterbehilfe für Internet Explorer 6 vom 21. Februar 2009
Zombies leben länger vom 21. Februar 2009
Revolte gegen den Internet Explorer 6 vom 20. Februar 2009
Der Zombiebrowser vom 20. Februar 2009
und wieder der IE6… vom 20. Februar 2009
Tragen wir den IE6 zu Grabe! vom 20. Februar 2009
Shall we support IE6 or not? – Die ewig leidige Geschichte mit dem IE6 vom 20. Februar 2009
Den Teufelskreis brechen vom 20. Februar 2009
Degradation Without Grace vom 20. Februar 2009
Der Kampf gegen den IE6 vom 19. oder 20. Februar 2009
Finnische Webmaster gegen veraltete Browser vom 19. Februar 2009
Der IE6 soll sterben vom 19. Februar 2009
Webmaster-Aufstand gegen alte Internet Explorer vom 19. Februar 2009
Abschied vom IE6 vom 15. Oktober 2008
IE Death March vom 20. August 2008

Kommentare

24. Februar 2009, BlogSchafftWissen - WissenSchaftsBlog schreibt: IE6: Aufstand, Sterbehilfe und Todesmarsch... Wer es leid ist, für lebende Fossilien wie den Microsoft Internet Explorer 6 ständig Workarounds zu bemühen, und sich tagtäglich damit herumzuärgern, selbst für einfachste CSS-Layouts wieder auf Tabellen zurückgreifen zu müssen, dem wird die In...
28. März 2009, fuenfwerken lab » IE 6 Kampagne schreibt: [...] > Warum der Internet Explorer 6 weg muss! [...]
24. August 2010, Raphael schreibt: Gute Gedanken, die mir aus der Seele sprechen. Denn wenn ich zusammenrechne, wie viel Zeit ich für die Adaptionen von Webseiten verschwendet habe, nur damit die IE6 sie auch darstellen kann, dann wird mir schlecht. Also habe ich für mich persönlich vor kurzem beschlossen die IE6-Adaptionen einfach nicht mehr zu machen. OK, einige der von mir gemachten Sites sind dann zwar nicht für 100% der Surfer zugänglich, aber was solls. Den Aufwand zahlt mir kein Kunde und wer mit dem IE6 heute noch durchs Web tuckert ist selbst schuld. Aber wahrscheinlich wird es noch in 10 Jahren immer noch User geben, die ihn verwenden. ;)
24. August 2010, Dieter schreibt: @Raphael Wenn das HTML-Grundgerüst (Markup) ordentlich ist, dann kannst Du den IE6 und älter auch einfach gar kein CSS geben. Das geht, indem Du konsequent CSS über eigene CSS-Dateien einbindest und diese mittels Conditional Comment vor dem IE6 und älter versteckst. Dann sehen die Webseiten im IE6 und älter zwar bescheiden aus, aber sind trotzdem zugänglich. Das werde ich übrigens beim Relaunch meiner beiden weiteren Websites jurafernstudium.de und dieter-welzel.de so machen. :-)
29. November 2011, Hinweis zum Internet Explorer bei WordPress | Webseiten-Infos.de schreibt: [...] habe ich auch bereits in dem Blogbeitrag “Warum der Internet Explorer 6 weg muss!” [...]

Externe Links in neuem Fenster öffnen?

Dieter — Wed, 11 Feb 2009 22:17:51 +0000

Ab heute werden hier externe Links W3C-konform im aktuellen Browser-Fenster geöffnet, also nicht mehr in einem neuen Fenster.

Warum?

Zum einem weil ich meine Webseiten möglichst unter Beachtung von Webstandards erstellen und betreiben will.
Zum anderen weil ich nun eine Lösung gefunden habe, den Besuchern dieser Webpräsenz als Alternative das Öffnen externer Links in einem neuen Fenster gut sichtbar anzubieten, also dem Besucher die Wahl überlasse.

Zwar kann der Nutzer auch über die rechte Maustaste einen Link in einem neuen Browser-Fenster beziehungsweise -Tab öffnen lassen. Dies ist jedoch vielen Nutzern nicht bekannt (siehe auch mein diesbezüglicher Kommentar zum Blogbeitrag “Plugin FV Code Highlighter“).

Nun hat er hier zudem die Möglichkeit oben in der rechten Spalte (Sidebar) die Checkbox “Externe Links in neuem Fenster?” durch einen Mausklick mit einem Haken zu versehen. Dadurch werden dann angeklickte externe Links in einem neuen Fenster geöffnet.

Auf dieses JavaScript bei Dr. Web bin ich über den Blogbeitrag “Externe Links in neuem Fenster öffnen” im Blog von Webdesign Weisshart gestoßen.

Und hier nun

der in der Sidebar von mir eingebaute XHTML-Code,
1
2
3
Auswahl:

Externe Links in neuem Fenster?

das zugehörige JavaScript externe-links.js, das von meiner Website heruntergeladen werden kann,

und ich grundsätzlich wie folgt in den Kopfbereich (Header) eingebunden habe, sowie
1
<script src="http://www.webseiten-infos.de/externe-links.js" type="text/javascript"></script>

die von mir verwendete CSS-Anweisung (nur der Vollständigkeit halber).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.skip, .hideme, .print {
position: absolute;
top: -1000em;
left: -1000em;
height: 1px;
width: 1px;
}
.skip:focus, .skip:active {
position: static;
top: 0;
left: 0;
height: auto;
width: auto;
}
.extern {
padding-bottom: 5px;
border-bottom: 1px #BFB49B dotted;
}

Ein ganz herzliches Dankeschön an

Ute für die Diskussion, die letztendlich mich zur Suche nach dem Skript und dieser Änderung bewegte,
Webdesign Weisshart für den Blogbeitrag “Externe Links in neuem Fenster öffnen” und
Dr. Web für die Veröffentlichung des Skripts im Blogbeitrag “Im gleichen oder im neuen Fenster?”.

Bleibt das Manko, dass ich nicht programmieren kann. Gerne würde ich nämlich das JavaScript so ausbauen, dass dessen Aktivierung für die ganze Webpräsenz gelten würde und dann auf allen Seiten der Haken in der Checkbox aktiviert wäre.

Noch besser wäre meiner Meinung nach eine PHP-Lösung, weil diese dann auch bei fehlendem beziehungsweise deaktiviertem JavaScript funktionieren würde.

Nachtrag:
Das JavaScript habe ich zwischenzeitlich mit einem anderen JavaScript

zwecks Verringerung der HTTP-Anfragen (HTTP-Requests) zusammengelegt,
ist dort in der ~~letzten~~ Zeile 13 zu finden und
die zusätzliche Einbindung im Kopfbereich (Header) von externe-links.js konnte ich deshalb entfernen.

Nachtrag vom 23. Januar 2010:
Das JavaScript wurde von Fritz Weisshart dahingehend ergänzt, dass es für alle Seiten einer Website gilt (siehe hierzu den Blogbeitrag “Neues Fenster für alle Seiten?“).

Kommentare

13. Februar 2009, Ute schreibt: Danke. :-)
Gerne würde ich nämlich das JavaScript so ausbauen, dass dessen Aktivierung für die ganze Webpräsenz gelten würde und dann auf allen Seiten der Haken in der Checkbox aktiviert wäre.
Das ließe sich wohl am besten über Cookies lösen, vielleicht hilft der Hinweis darauf, mal nach was zu suchen, was das kann?!
13. Februar 2009, Dieter schreibt:
Das ließe sich wohl am besten über Cookies lösen
Das habe ich mir auch schon gedacht. ;-) Das Problem ist, dass ich von JavaScript keine Ahnung habe. :cry: Und in meiner ToLearn-Liste stehen davor noch Grafikbearbeitung mit Fireworks und PHP.
13. Februar 2009, Ute schreibt:
Das Problem ist, dass ich von JavaScript keine Ahnung habe. :cry:
Ich finde es in diesem Fall auch nicht ganz so dringend. Denn meist sind Nutzer ohne JS, sowieso erfahrener, weil sie ja bereits den Knopf gefunden haben JS zu deaktivieren. Es dürfte dann kaum mal jemand treffen, die dadurch völlig irritiert sind...
ToLearn-Liste stehen davor noch Grafikbearbeitung mit Fireworks und PHP
Grafikbearbeitung ist sicher nicht schlecht, warum grad Fireworks? Ich nutze ja sowieso keine lizenzpflichtigen Programme, aber ich hatte bislang noch nie den Bedarf mehr als entweder Scribus (ist mir für Vektorgrafiken meist lieber als Inkscape, da es auch direkt als Layoutprogramm funktioniert) oder eben Gimp (für alles andere, wie Bildle bearbeiten und so) zu nutzen. Oder ist Fireworks statt der einzelnen Photoshop und Illustrator gedacht? Ein bisschen PHP ist gerade auch für WP und andere Systeme, die das einsetzen natürlich praktisch.
13. Februar 2009, Dieter schreibt:
Denn meist sind Nutzer ohne JS, sowieso erfahrener, weil sie ja bereits den Knopf gefunden haben JS zu deaktivieren.
Gute Schlussfolgerung. Dann muss ich wenigstens meine ToLearn-Liste nicht umstellen. ;-)
warum grad Fireworks?
Dafür gibt es einige Gründe. Die Wichtigsten sind: 1. Fireworks habe ich schon. 2. Fireworks beherrscht PNG 8 mit Alphatransparenz und das sieht dann auch noch halbwegs akzeptabel beim IE 6 aus. 3. Fireworks kann jpg-Dateien besonders gut komprimieren. 4. Fireworks beherrscht Vektor- und Pixelgrafiken. Ich muss dann nur die Bedienung eines Programms für beide Grafikarten lernen.
16. Februar 2009, Ute schreibt:
1. Fireworks habe ich schon.
Ok, das sehe ich ein. ;-) Bilder für den IE6 werden hoffentlich täglich weniger nötig. Im Zweifel bekommt der von mir zur Zeit ein nicht so hübsches, aber akzeptables *.gif...
16. Februar 2009, Dieter schreibt:
Bilder für den IE6 werden hoffentlich täglich weniger nötig.
Ich befürchte der IE6 bleibt uns noch eine Zeit lang erhalten, auch wenn ich Anhänger der Initiative IE Death March (2009) bin. ;-)
Im Zweifel bekommt der von mir zur Zeit ein nicht so hübsches, aber akzeptables *.gif…
Wenn es sich irgendwie vermeiden lässt, bekommt der IE 6 bei mir keine andere Grafikdatei. So habe ich den Beta-Button für IE 6 und kleiner einfach mit display:none ausgeblendet. Gleichwohl bin ich an der Technik eigene Grafikdatei für den IE6 interessiert. Hast Du da einen Linktipp?
16. Februar 2009, Dieter schreibt:
Bilder für den IE6 werden hoffentlich täglich weniger nötig.
Nachtrag: Nach meiner chCounter-Statistik für diese Website, verwenden die meisten Nutzer des Internet Explorers (IE) immer noch den veralteten IE 6! Hier zur Veranschaulichung mal die bisherige Verteilung im Februar. IE 6: 45,16% IE 7: 40,86% IE 5.5: 9,68% IE 5: 3,23% IE 8: 1,08%
17. Februar 2009, Ute schreibt:
Gleichwohl bin ich an der Technik eigene Grafikdatei für den IE6 interessiert. Hast Du da einen Linktipp?
Ich glaub ich steh auf der Leitung. ;-) Technik? Was du mit display:none machst, kannst du genausogut mit einem anderen Bild tun: Du definierst irgendwo im CSS dein Bild für alle Browser. Der IE soll was anderes bekommen: ie_stylesheet.css eingebunden mit Conditional Comments Zum Beispiel anderes Hintergrundbild für den body: body{ background:transparent url(/images/logos/bild_fuer_den_ie.gif) no-repeat left center; } Das ist alles, mehr ist da nicht dran. Oder habe ich dich jetzt falsch verstanden? Zur Statistik: Es kommt darauf an über welche Seiten wir reden, auf manchen Kundenseiten habe ich auch noch hohe Zahlen mit alten IEs, allerdings nicht so heftig wie bei dir. Auf miradlo bloggt allerdings: IE 6 0,4% IE 7 0,6% Klar, wir haben sowieso selten mehr als 10% Windows-Nutzer...
17. Februar 2009, Dieter schreibt:
Der IE soll was anderes bekommen: ie_stylesheet.css eingebunden mit Conditional Comments
:schockiert: So einfach?
Auf miradlo bloggt allerdings: IE 6 0,4% IE 7 0,6% Klar, wir haben sowieso selten mehr als 10% Windows-Nutzer…
Also hier habe ich aktuell 67,89% Windows-Nutzer und 27,42% Internet Explorer-Nutzer. Führend ist mit 43,08% der Firefox, was für die Mehrheit der Besucher meiner Website spricht! :hurra:
17. Februar 2009, Markus schreibt: Echt krass wie viele noch den IE6 verwenden, ist ja auch aus Sicherheitssicht nicht gerade empfehlenswert, oder? Und wahrscheinlich sehen viele Seiten etwas komisch aus wenn das CSS mal wieder nicht richtig interpretiert wird...
17. Februar 2009, Ute schreibt:
:schockiert: So einfach?
Ja, funktioniert bei mir problemlos. :lachtot: Bei dir wär's als größter Firefox-Fan ja auch besonders bitter, wenn er nicht führen würde. Hm, ob ich in Zukunft nur mit dem Konqui komme, ändert das die Statistik? ;-)
17. Februar 2009, Dieter schreibt:
Hm, ob ich in Zukunft nur mit dem Konqui komme, ändert das die Statistik?
Bestimmt, aber ich denke nicht, dass Du alleine so den Firefox vom Thron stoßen kannst. Da musst Du schon auch immer mit dem Internet Explorer vorbeikommen. :ugly:
17. Februar 2009, Dieter schreibt: @Markus
Echt krass wie viele noch den IE6 verwenden, ist ja auch aus Sicherheitssicht nicht gerade empfehlenswert, oder?
Natürlich nicht! Deswegen dürfen auch alle Besucher mit dem Internet Explorer Folgendes auf dieser Seite lesen: "Diese Webseite sieht mit einem modernen Browser besser aus. Warum solltest Du und wie kannst Du wechseln?" Kannst Du ja mal selbst testen, indem Du mit dem Internet Explorer bis einschließlich Version 7 6 diese Website aufsuchst. :freu: Darüber hinaus empfehle ich jedesmal, wenn ich über Sicherheitslücken im Internet Explorer berichte, auf einen modernen Browser zu wechseln.
Und wahrscheinlich sehen viele Seiten etwas komisch aus wenn das CSS mal wieder nicht richtig interpretiert wird…
Jepp! Auch diese Seite sieht im Internet Explorer nicht so gut aus, wie in modernen Browsern. Am Besten kommen die CSS3-Effekte einschließlich Schatteneffekt um manche Boxen beim Safari und Google Chrome wegen der WebKit-Engine zur Geltung. Aber mit dem Firefox 3.1, der ja in diesem Jahr veröffentlicht wird, sollte auch dieser den Schatteneffekt zeigen. :hurra:
22. September 2009, Fritz schreibt: "Gerne würde ich nämlich das JavaScript so ausbauen, dass dessen Aktivierung für die ganze Webpräsenz gelten würde und dann auf allen Seiten der Haken in der Checkbox aktiviert wäre." :arrow: Guggs du hier :-D
22. September 2009, Dieter schreibt: @Fritz Wow! :god: Ein ganz, ganz großes Dankeschön. :hurra: Dein neuer Artikel liest sich gut. Ich hoffe, ich bekomme es, obwohl ich nicht programmieren kann hin, zumal ich den JavaScript-Code auch noch in eine externe JavaScript-Datei ausgelagert habe. Aber bekanntlich wächst man ja mit seinen Aufgaben. ;-)
22. September 2009, Fritz schreibt:
obwohl ich nicht programmieren
Wozu gibt es copy & paste? :-D
22. September 2009, Dieter schreibt: @Fritz
Wozu gibt es copy & paste?
Werde ich auch wieder (!) machen. ;-) Inzwischen gibt es auf Webseiten-Infos.de auch den Smooth Scrolling-Effekt von Deiner Seite. :-D :ups:
23. September 2009, Dieter schreibt: Super! Copy & Paste hat funktioniert. Einen eigenen Blogbeitrag gibt es dazu mit dem Titel "Neues Fenster für alle Seiten?".

Was macht eine gute Webpräsenz aus?

Dieter — Sun, 21 Dec 2008 23:26:38 +0000

In Anlehnung an das sehr lesenswerte Buch “Little Boxes Teil 0″ von Peter Müller möchte ich hier sieben wesentliche Qualitätskriterien nennen (siehe auch seinen ebenfalls lesenswerten Artikel “Gute Seiten, schlechte Seiten” bei akademie.de).

Little Boxes Teil 0

Peter Müller. Markt und Technik 2008, Broschiert, 240 Seiten, € 4,99

1. Der Inhalt

Oder: Was gibt es hier?

Der Inhalt ist das A und O einer guten Webseite. Oder auf englisch: Content is King.

Konkret heißt das, dass Du Dir als Erstes Gedanken machen solltest, welche Inhalte Du auf Deiner Webpräsenz veröffentlichen willst. Hierbei gilt es Pflichtangaben wie beispielsweise im Regelfall das Impressum (Assistent) zu beachten.

Mögliche Medien zur Präsentation Deiner Inhalte sind

Text
Bilder
Ton
Videos

2. Die benutzerfreundliche Gestaltung

Oder: Wie sieht es aus?

In Abhängigkeit von Deinen Inhalten solltest Du die Gestaltung festlegen.

Sofern Du Informationen bereitstellen möchtest, liegt dem der Gedanke form follows function (Form folgt Funktion) zugrunde.

Der Zweck liegt dann in einer hohen Benutzerfreundlichkeit (Usability), so dass der Besucher Deiner Webpräsenz sich keine großen Gedanken darüber machen muss wie und wo er etwas findet (Englisch: Don´t make me think! So heißt übrigens auch das sehr lesenswerte Buch von Steve Krug zur Web Usability).

Don’t make me think!

Steve Krug. mitp 2006, Taschenbuch, 224 Seiten, € 24,95

Wesentliche Bestandteile der grafischen Gestaltung sind

das Layout der Seiten,
die Farben,
die grafischen Elemente und
die Schriftart (Typographie, Typografie).

Webseiten sind weder Gemälde noch aus Papier. Vielmehr werden sie für die Besucher gemacht und diese können mit den verschiedensten Ausgabegeräten wie Handy, PDA, PC-Monitor und verschiedensten Einstellungen des jeweiligen Browsers Deine Webseiten sehen.

Vor diesem Hintergrund führen Mängel bei der Zugänglichkeit zum Aussperren oder zumindest zu Zugangsbehinderungen von (potentiellen) Besuchern.

3. Die Zugänglichkeit (Accessibility)

Oder: Können alle Ausgabegeräte (Browser, Screenreader etc) die Seite darstellen?

Die Zugänglichkeit ist also nicht nur eine Frage des Internetzugangs für behinderte Menschen.

Vielmehr geht es darum mit welchen Ausgabegeräten und welchen Einstellungen derselben Deine Webseiten von jedem Besucher gesehen und genutzt werden können.

Schau Dir mal beispielsweise Webseiten mit

ausgeschalteten Cascading Style Sheets (CSS),
ausgeschaltetem JavaScript (JS),
einem Browser ohne Flashunterstützung/-Plugin,
deutlich vergrößerter Schrift,
einem Handy

an. Wenn Du auch dann noch die Webseiten gut betrachten sowie deren Navigation und Funktionen nutzen kannst, dann ist diese Webpräsenz gut zugänglich (barrierefrei; besser: barrierearm).

4. Die Navigation

Oder: Wie findet sich der Besucher zurecht?

Die Navigation ist ein sehr wichtiger Bestandteil der Gestaltung einer Website. Für sie gilt im Besonderen, dass der Besucher sie benutzen soll ohne darüber nachdenken zu müssen.

Eine gute Navigation zeichnet sich dadurch aus, dass sie

selbsterklärend ist, also vom Besucher nicht erlernt werden muss,
eindeutige und aussagekräftige Beschriftungen enthält,
dem Besucher anzeigt, wo er sich gerade befindet (in der Regel mit einer Brotkrümelnavigation (breadcrumb navigation) realisiert),
allgemeine Konventionen beachtet und
Alternativen bietet (Navigationsmenü, Suche und gegebenenfalls Brotkrümelnavigation).

Besonders intuitiv, da aus dem realen Leben bekannt und im Web ursprünglich durch Amazon populär geworden, ist die Karteikarten-Navigation (Tab-Navigation, Registerkarten-Navigation, Reiternavigation, Tabbed Document Interfaces (TDI)).

5. Die Ladezeit der Webseite

Oder: Wie schnell wird die Webseite geladen?

Zu schnell gibt es nicht, wohl aber zu langsam.

Definitiv zu langsam geht das Laden der Seite, wenn der Besucher den Button Abbrechen angeklickt hat, bevor die Seite geladen ist.

Ursächlich für (zu) lange Ladezeiten sind häufig nicht für das Web optimierte Grafiken.

Dabei darfst Du zudem nicht vergessen, dass es immer noch viele Surfer gibt, die kein DSL haben (Statistik).

Einen Geschwindigkeitscheck kannst Du beispielsweise bei websiteoptimization.com vornehmen.

Eine sehr schnelle Seite hat beispielsweise die Suchmaschine Google.

6. Die Qualität des Quelltextes

Oder: Entspricht der Quelltext modernen Standards?

Dies ist ein Qualitätsmerkmal, welches der Besucher normalerweise nicht sieht, denn die Browser besitzen eine ausgesprochen hohe Fehlertoleranz.

Guter Quelltext berücksichtigt die Trennung von Inhalt und Gestaltung. Während (X)HTML für den semantisch korrekt ausgezeichneten Inhalt (das Markup) zuständig ist, wird die Gestaltung mit CSS umgesetzt.

Der aus meiner Sicht wichtigste Vorteil einer konsequenten Trennung durch Auslagerung von CSS in externe Dateien ist, dass sich damit die Webseiten wesentlich einfacher pflegen lassen.

Der Quelltext einer Webseite kann durch einen Validator auf Grammatikfehler überprüft werden.

So bietet beispielsweise das World Wide Web Consortium (W3C) einen (X)HTML-Validator als auch einen CSS-Validator an.

Eine validierende Webseite, die also keine Grammatikfehler aufweist, ist ein Zeichen für ein sorgfältiges Arbeiten beim Erstellen und Pflegen der Seite. Leider sind solche Webseiten auch heute noch die Ausnahme. Nach dem englischen MAMA Markup Validation Report von Opera sind lediglich etwa 4% aller Seiten im Web valide!

Einen hervorragenden Einstieg zum Lernen von (X)HTML und CSS bieten die Bücher Little Boxes Teil 1 und 2 von Peter Müller.

Little Boxes, Teil 1

Peter M. Müller. Markt und Technik 2009, Broschiert, 381 Seiten, € 24,95

Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr.

Peter M. Müller. Markt+Technik 2007, Broschiert, 394 Seiten, € 24,95

Schließlich sei noch auf den Qualidator hingewiesen, der Webpräsenzen hinsichtlich

Usability (Benutzungsfreundlichkeit),
Accessibility (Zugänglichkeit),
SEO (Suchmaschinenoptimierung) und
Quality (technische Qualität)

überprüft. Diesbezüglich sehenswertes Beispiel: Webdesign Weisshart

7. Die Kommunikation mit den Besuchern

Oder: Wird die Möglichkeit zur Interaktion adäquat umgesetzt?

Moderne Webpräsenzen verfügen heutzutage über vielfältige Möglichkeiten der Interaktion.

Selbst für kleine private Webauftritte gelten Kontaktformular, Suche und Gästebuch fast schon als Mindestausstattung, sprich Standard.

Im “Mitmach”-Web 2.0 werden die Inhalte sogar nicht mehr nur oder überhaupt nicht mehr vom Betreiber der Seite, sondern von den Benutzern erstellt. Typische Beispiele dafür sind

Foren,
Videoplattformen wie YouTube,
Foto-Communities wie Flickr,
Wikis wie Wikipedia,
Social-Bookmark-Netzwerke wie Mister Wong und Delicous,
Blogs wie bei Blogger.com und WordPress.com,
der Mikro-Blogging-Dienst Twitter sowie
Community-Plattformen wie MySpace, wer-kennt-wen und StudiVZ.

Kommentare

23. Dezember 2009, Name-gelöscht schreibt: Danke für den Beitrag.
23. Dezember 2009, Dieter schreibt: Bitte schön.
17. November 2011, Harald schreibt: Eine Webseite sollte übersichtlich und leicht zu verstehen sein. Die Buttons nicht zu versteckt, die Navigation auf jeder Seite gleich sein. Das "allgemeine Interesse" ist schon von Relevanz. Je weniger Geflacker und Geglitzer, um so einfacher ist sie auf den verschiedenen Geräten zu öffnen.
18. November 2011, Dieter schreibt: @Harald Ich denke Deine Hinweise sind Konkretisierungen der Punkte 2. bis 4. (insbesondere des Gedankens Form follows function).
29. November 2011, Externe Dienste in Webseiten vermeiden | Webseiten-Infos.de schreibt: [...] einer Webseite ist ein wichtiges Qualitätskriterium (siehe hierzu auch den Abschnitt “Die Ladezeit der Webseite” des Artikels “Was macht eine gute Webpräsenz [...]
3. Dezember 2011, Der BITV-Selbsttest mit Fragebogen | Webseiten-Infos.de schreibt: [...] der Webseiten auf Webseiten-Infos.de liegt mir besonders am Herzen (siehe hierzu den Abschnitt 3. Die Zugänglichkeit (Accessibility) des Artikels “Was macht eine gute Webpräsenz aus?” sowie die Blogbeiträge [...]

Webseiten-Infos.de » Webstandards

Adventskalender 2010 der Webkrauts

Ähnliche Beiträge

Adventskalender 2009 der Webkrauts

Ähnliche Beiträge

Webstandards mit blauen Mützen unterstützen?

Kommentare

Ähnliche Beiträge

Internet Explorer sucks!

Kommentare

Ähnliche Beiträge

Neues Fenster für alle Seiten?

Kommentare

Ähnliche Beiträge

Warum der Internet Explorer 6 weg muss!

Inhaltsverzeichnis

1. Mangelhafte Unterstützung von Webstandards

2. Viele und gravierende Sicherheitslücken

Warum solltest Du und wie kannst Du vom Internet Explorer zu einem modernen Browser wechseln?

3. Wie mit dem Internet Explorer 6 und seinen Nutzern umgehen?

4. Linktipps

Kommentare

Ähnliche Beiträge

Externe Links in neuem Fenster öffnen?

Kommentare

Ähnliche Beiträge

Was macht eine gute Webpräsenz aus?

Inhaltsverzeichnis

Little Boxes Teil 0

1. Der Inhalt

2. Die benutzerfreundliche Gestaltung

Don’t make me think!

3. Die Zugänglichkeit (Accessibility)

4. Die Navigation

5. Die Ladezeit der Webseite

6. Die Qualität des Quelltextes

Little Boxes, Teil 1

Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr.

7. Die Kommunikation mit den Besuchern

Kommentare

Ähnliche Beiträge