Webdesign - Zapps Blog

Direkt zum Inhalt




Beiträge zum Thema „Webdesign”

Safari/Win, IE 7 und die Listen

Bei meinem Blogumzug bin ich auf zwei mir bislang unbekannte Browserbugs gestossen, über die auch eine kurze Google-Recherche keine Informationen lieferte. Beide betreffen eher experimentelle Browser, nämlich den Internet Explorer 7 und Safari 3.02 für Windows.

Die Standard-Sidebar ist bei Wordpress eine Ansammlung verschachtelter Listen:

<ul id="navi> <li> <h2>Rubriküberschrift 1</h2> <ul> <li>Navigationspunkt 1</li> <li>Navigationspunkt 2</li> </ul> </li> <li> … </li> </ul>

Mit dem dazugehörigen CSS kommen beide Browser nicht so recht klar:

  • Safari ignoriert – mindestens für ul – komplett den Universalselektor * {margin:0; padding:0;} und benötigt für diese eine eigene Formatierung, also ul {margin:0; padding:0;}

  • Der IE 7 produziert – erstaunlicherweise im Gegensatz zum IE 6 – Abstände über den inneren ul, obwohl laut IE-Web-Developer-Toolbar das CSS richtig vom Browser verstanden wird. Der Bug hat mal wieder mit der hasLayout-Eigenschaft der IEs zu tun und Abhilfe schafft ein *:first-child+html #navi ul {height:1%}

    Um die Gefahr von irgendwelchen Überraschungen mit anderen Browsern zu verringern, habe ich hier im Selektor den Star-Plus-HTML-Hack angewendet, der momentan nur den IE 7 ansprechen sollte.

Es ist doch immer wieder schön, wie viele Überraschungen man mit den verschiedenen Browsern erleben kann. Vielleicht hat ja auch noch jemand einen Tipp, warum Opera 9.2 das padding-top der li in meinen Bilderstreifen ul.bildergallerie li { display:inline; padding-top:15px; } ignoriert? Momentan kleben die Vorschaubilder in diesem Browser doch etwas eng aneinander, wenn sie nicht mehr alle in eine Zeile passen.

Dezenter Hinweis aus der Industrie

Als grossgewachsener Mensch gewöhnt man sich ja irgendwann an die Probleme beim Klamottenkauf: Ärmel und Hosenbeine sind grundsätzlich zu kurz und bei der Bauchumhüllung gibt es regelmässig nur die Wahl zwischen Sack und Presswurstpelle.

Dass nun aber auch noch die Produktion meiner Lieblingsjeans in der von mir benötigten Weiten/Längen-Kombination eingestellt wurde, kann ich nur als dezenten Hinweis auf die Notwendigkeit einer Diät verstehen. Oder ist es vielleicht doch ein Aufruf zur Selbstverstümmelung? Bei kürzeren Beinlängen gehen die Bundweiten schliesslich wieder bis zum Fassformat.

Liebe Planer von Levi's: Sagt mir doch bitte das nächste Mal vorher Bescheid, dann kaufe ich euch eine Monatsproduktion ab und mache damit über die folgenden Jahre ein Vermögen bei Ebay.

PS: Über die Firmenhomepage von Levi's, von der ich mir irrigerweise sachdienliche Informationen erhofft hatte, könnte man sich auch hervorragend aufregen. Kein Wunder, dass sie bei einer Google-Suche nach "Levis Deutschland" gar nicht auf der ersten Ergebnisseite auftaucht und selbst bei der Suche allein nach dem Markennamen noch locker von einem polnischen Geschäftsmann geschlagen wird.

taz-Printausgabe wieder online

Durch einen Zufall habe ich heute entdeckt, dass die von mir vermisste virtuelle Printausgabe der taz wieder online verfügbar ist.

Allerdings scheinen die taz-Macher sie vor ihren Besuchern verstecken zu wollen, man gelangt nur über recht unauffällig platzierte Links zu ihr:

  • Auf der taz-Startseite heisst der gesuchte Link 'Mehr taz!' und ist ohne scrollen nicht zu erreichen.
  • Auf der folgenden Abo-Seite lautet der Linktext schlicht 'hier'.
  • Über ihn kommt man schliesslich zur virtuellen Printausgabe.

(Man kommt alternativ auch über das Archiv, dass sich offensichtlich auf die Printausgabe der taz und nicht auf die Internetseite bezieht, zum Ziel.)

Der virtuellen Printausgabe fehlen bei Artikeln, die nicht auch separat online gestellt wurden, wie gewohnt alle Bilder und jedes weitergehende Layout. Leider kann man sich die aktuelle Titelseite der taz nicht mehr in Originalgrösse anschauen, auf der Abo-Seite wird lediglich ein stark verkleinertes Bild präsentiert.

Insgesamt ist es sicher positiv, dass auf die Kritik der Leser eingegangen wurde und die Printausgabe wieder in alter Form verfügbar gemacht wurde, allerdings ist es für mich unverständlich, warum sie so versteckt wird.

Habe ich eigentlich schon mal angemerkt, dass taz.de mittlerweile aussieht, wie jede beliebige andere Nachrichtenseite auch?
Grossflächige Werbung, irrelevante Leserumfragen, Leserforen (momentan drei(!) Themen) und die unvermeidlichen Bildergalerien haben hier nun auch Einzug gehalten. Ihr Profil wird die taz-Genossenschaft so wohl kaum schärfen.

Passendes aus dem Archiv:

Feed to JavaScript

Als momentan beste Lösung zu meinem im Beitrag Cookies prinzipiell „fies und hinterhältig”? beschriebenen Problem habe ich nun den Feed to JavaScript-Service von feed2js.org gefunden. Er erstellt ein JavaScript, mit dessen Hilfe man den Inhalt eines beliebigen RSS-Feeds in eine Internetseite einbauen kann. Das Ganze ist ziemlich frei konfigurierbar, Cookie-frei und ohne Werbung.

Wichtig war für mich im konkreten Fall, dass die erzeugten Links ein beliebiges target-Attribut mitbekommen können, da ich sie über target="_parent" den Signatur-Iframe sprengen lassen möchte.

Für Anwender wie mich, die momentan keinen Webspace zur Verfügung haben, der eine Scriptsprache wie PHP unterstützt, scheint mir dieser Service die optimale Möglichkeit, den RSS-Feed in HTML umzuwandeln. Allerdings mit der Einschränkung, dass Besucher, die JavaScript abgeschaltet haben, nichts bzw. nur einen Link zum Feed zu sehen bekommen.

taz nicht mehr rot

Und noch ein neues Layout im Pressedschungel: Die taz hat ihren Internetauftritt renoviert und dabei auch gleich die alte Leitfarbe deutlich zurückgefahren.

Nun sieht es dort auch so aus, wie auf anderen Newsseiten und die Printausgabe ist hinter der Seite kaum mehr zu erkennen. Gerade das hat für mich den Charme des alten Layouts ausgemacht, man hatte im taz-losen Ausland fast das Gefühl, die Druckausgabe durchblättern zu können. Ausserdem fand ich es extrem praktisch, über eine kleine Datumsmanipulation in der URL gezielt auf ältere Ausgaben zugreifen zu können.

PS: Vielleicht dient das neue Layout ja auch der Förderung des digitalen Abos?

Nachtrag: Puh, was eine Friemelei, ein Benutzerstylesheet hinzubekommen, dass eine vernünftige Textbreite bei einer grösseren Schrift ermöglicht. Der Code ist, sagen wir mal, interessant. Falls jemanden meine momentane Lösung interessiert:

Zusätzlicher Code in der userContent.css:

/*TAZ*/ @-moz-document domain(taz.de){ div#werbung_rechts, div#werbung_oben, .anzeige, #anzeige, .werbeblock_inline, .schwarzer_rahmen_links {display:none;} #hauptbereich, #content_gesamt, #main_navi_div, #main_navi_sub_div, .schwarzer_rahmen_oben {width:100% !important;} #linke_spalte, #linke_spalte > div {width:700px !important;} #artikel * {font-size: 20px !important; line-height:1.3em !important;} #artikel h1 {font-size:30px !important;} .artikelheader {border:0 !important;} #hauptbereich {background:white !important;} .schwarzer_rahmen_oben, #hauptbereich {position:static !important; top:0;} #linke_spalte {margin-left:120px; margin-right:30px;} }

Das Benutzerstylesheet ist natürlich stark auf meine persönlichen Bedürfnisse und Lesegewohnheiten zugeschnitten und für eine Bearbeitung der Übersichtsseiten hat meine Motivation noch nicht gereicht. Die px-Angaben dürfen angepasst werden. ;-)

Alles neu macht der Mai

Der Frühjahrsputz bei den grossen Newsseiten scheint immer noch nicht abgeschlossen zu sein, jetzt hat es die Zeit erwischt. Das Design Tagebuch hat sich schon den gestalterischen Aspekten gewidmet, mal schauen, ob der immer noch ziemlich seltsame Quelltext demnächst im Trash Log erwähnt wird. (Nachtrag: Im Trash Log gibt es mittlerweile einen entsprechenden Artikel.)

Für mich als Nutzer bedeutet so eine gravierende Umstellung einer meiner Stammseiten zunächst einmal, dass die userContent.css angepasst werden muss, damit die Artikel wieder besser lesbar werden.

Grundsätzlich sind mir die Schriftgrösse und die Spaltenbreite auf den meissten Newsseiten zu klein, weshalb beide angepasst werden. Auf Teile der Navigation kann ich dabei gerne verzichten, da ich die Seite fast ausschliesslich über den Feedreader betrete. Um die Werbung kümmert sich Adblock, der störende graue Hintergrund wird ebenfalls über die userContent.css entfernt. Das Ergebnis entspricht dann schon eher dem, was ich persönlich unter einer gut lesbaren Internetseite verstehe.

  • Werbung, schmale Spalten, kleine Schrift
  • keine Werbung, eine einzige breite Spalte mit dem Artikeltext, grosse Schrift

Ich bin immer wieder begeistert davon, wie einfach es mit dem Firefox und ein paar Grundkenntnissen in HTML und CSS ist, "das Internet" seinen eigenen Bedürfnissen anzupassen.

Zusätzlicher Code in der userContent.css:

@-moz-document domain(www.zeit.de) { body { background:white !important; } #content .inner { background-color:white; background-image:none; position:absolute; left:0; width:50em !important; z-index:100; font-size:18px; margin:0 !important; padding-left:3em !important; } }

Update (08.03.2008):

Das an das aktuelle Layout der Zeit angepasste Benutzerstylesheet findet sich in den Kommentaren.

Webdesign zum Abgewöhnen

Es gibt Dinge, bei denen ich mir als potentieller Kunde ziemlich verarscht (sorry für die deutlichen Worte) vorkomme. Zu diesen Dingen gehört sicherlich, wenn eine Webseite zunächst komplett lädt, ich während der relativ langen Ladezeit schon zu lesen anfange, und mich die Seite gerade nachdem ich das erste interessante Produkt gefunden habe, damit überrascht, neu zu laden und nur noch diese Meldung zu zeigen:

This site requires Javasript to be enabled. Enable Javasript from your browser. Then go to the front page of the site.

Sowas löst bei mir automatisch den Tab-Schliessen-Reflex aus und ist meiner Meinung nach noch mal eine Kategorie schlimmer als eine "Meine Seite ist so schlecht, dass sie ohne JS gar nicht funktioniert"-Meldung gleich zu Beginn.

Quelltext für Fortgeschrittene

Wie formatiert man ein Leerzeichen? Der Macher von bahndeutsch.de hat sich für folgende Lösung entschieden:

<b> <font face="Arial, Helvetica, sans-serif" size="4"> <font size="5"> <font size="6"> <font size="4"> <font size="5"> <font size="4" face="Courier New, Courier, mono"> <font face="Arial, Helvetica, sans-serif" size="5"> <i> <font color="#99CCFF"> &nbsp; </font> </i> </font> </font> </font> </font> </font> </font> </font> </b>

Falls das kein besonders ausgetüftelter Werbetrick ist, zolle ich dem kreativen Einsatz eines veralteten HTML-Elements mit einer leichten Verbeugung in Richtung Frontpage, Word und Co. meine Hochachtung.

Wenn man vom interessanten Quelltext mal absieht (das Leerzeichen findet sich übrigens in Zeile 35), ist die Bahndeutsch-Seite aber gar nicht mal so übel.

Gefunden im Trash Log.

Nachtrag: Es war ja eigentlich nur eine Frage der Zeit: Das Leerzeichen ist mittlerweile mitsamt Formatierung ersatzlos gestrichen worden.

Kompetenzfragen

Ich hatte ja schon mal leise Zweifel an der Praxis der Preisvergabe bei den Lead Awards geäussert. Mittlerweile stellt aber auch Thomas Knüwer die Kompetenz der Lead Academy in Frage.

Wenn bei einer Ausstellung zu Ehren der Gewinner der Lead Awards sein ausgezeichnetes Blog mit einer ganz anderen Internetseite verwechselt wird, kann das schon zum Nachdenken anregen â€¦

Web-Don’ts

Dinge, die man einfach nicht mehr macht hat Konkurrenz bekommen:
19 Things NOT To Do When Building a Website (eigentlich sind es mittlerweile sogar 24 Dinge).

In doch recht deutlicher Sprache geht Josiah Cole mit den übelsten Webdesign-Sünden ins Gericht. Einer meiner Favoriten:

8. If your website does not work in Firefox, welcome to 2007 DUMBASS. [...] [I]f the morons you hired didn’t make your site and functionality compatible with Firefox they obviously have no idea what they’re doing, and aren’t up on their game. I have no idea why you would need a website, or functionality system that is so dependent on IE that it simply can’t work in Firefox, and frankly it doesn’t matter because there is no good reason. The lack of Firefox knowledge by a webmaster shows they aren’t of the Internet culture, and that’s a bad sign if you’re a business owner.

Neben alt Bekanntem (Hintergrundmusik, reine Flash-Seitem etc.) werden auch weniger offensichtliche Dinge genannt:

17. If you’re delivering video, it better not ask the user which bandwidth or version of video they’d like. Real Player, 100K, Windows Media Player, Quicktime, WMV, 300K, AVI, Cable, DSL, Dial-Up? NO THANK YOU. Deliver your video in an embedded player in Flash. I’m sorry, Flash won this battle a long time ago (see YouTube), it has the install base, the lean interface and isn’t trying to get you to join “their world” of media player fantasy where they place system tray icons and launch helpers and pop up every time you pop in a CD or DVD. Flash is cross platform and cross browser compatible, something none of the other providers can say.

Wenn sich alle daran halten würden, könnte man sich die Duelle mit dem RealMedia-Plugin oder einer widerspenstigen mediaplayer.dll in Zukunft sparen. Schön wärs schon.

Schon etwas älter, aber dafür auf Deutsch und mit einer klasse Überschrift: Web-Entwickler: Dumm, faul und böse von c't-Redakteur Gerald Himmelein.

via Jens Meiert